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开发 】 主 要 内 容 包 括 jQuery Mobile 基础 、jQuery Mobile UI 组 件 、jQuery Mobile 事件 、 数 据 存储 和 读 取 技术 
等 ; 第 V 篇 【综合 案例 实战 】 主 要 内 容 包括 制作 休闲 娱乐 类 网 页 、 制 作 企业 门户 类 网 页 、 制 作 电子 商务 类 网 页 、 
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HTML 5， 通 过 学 习 均 可 快速 掌握 网 页 的 设计 方法 和 技巧 。 
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“网 站 开发 案例 课堂 ”系列 图 书 是 专门 为 办 公 技 能 和 网 页 设计 初学 者 量 身 定制 的 一 套 学 
习 用 书 。 整 套 书 涵盖 高 效 办 公 、 网 站 开发 、 数 据 库 设 计 等 方面 。 整 套 书 具 有 以 下 特点 。 

前 沿 科技 

无 论 是 网 站 建设 、 数 据 库 设计 还 是 HTML 5、CSS 3， 我 们 都 精 选 较为 前 沿 或 者 用 户 群 最 
大 的 领域 推进 ， 帮 助 大 家 认识 和 了 解 最 新 动态 。 


权威 的 作者 团队 


组 织 国家 重点 实验 室 和 资深 应 用 专家 联手 编著 该 套图 书 ， 融 合 丰富 的 教学 经 验 与 优秀 的 
管理 理念 。 


学 习 型 案例 设计 


以 技术 的 实际 应 用 过 程 为 主线 ， 全 程 采用 图 解 和 同步 多 媒体 结合 的 教学 方式 ， 生 动 、 直 
观 、 全 面 地 剖析 使 用 过 程 中 的 各 种 应 用 技能 ， 降 低 难度 ， 提 升学 习 效率 


为 什么 要 写 这 样 一 本 书 


随 着 用 户 对 页 面体 验 要 求 的 提高 ， 页 面前 端 技术 日 趋 重要 。HTML 5 技术 成 熟 ， 在 前 端 
技术 中 突显 优势 ， 在 各 大 浏览 器 厂商 的 支持 下 ， 将 会 更 加 盛行 ， 因 此 本 书 致力 于 帮助 读者 完 
全 掌握 该 技术 。 本 书 可 以 让 读者 掌握 目前 流行 的 最 新 前 端 技术 ， 使 前 端 从 外 观 上 变 得 更 炫 、 
技术 上 更 简易 。 通 过 本 书 的 案例 实 训 ， 大 学 生 可 以 很 快 地 掌握 流行 的 工具 ， 提 高 职业 化 能 
力 ， 从 而 帮助 解决 公司 与 求职 者 的 双重 需求 问题 。 


本 书 特色 


e 和 零 基 础 、 入 门 级 的 讲解 

无 论 您 是 否 从 事 计 算 机 相关 行业 ， 无 论 您 是 否 接触 过 网 页 制作 和 设计 ， 都 能 从 本 书 中 找 
到 最 佳 起 点 。 

e ” 超 多 、 实 用 、 专 业 的 范例 和 项 目 

本 书 在 编排 上 紧密 结合 深入 学 习 网 页 制作 技术 的 先后 过 程 ， 从 HTML 5 的 基本 概念 开 
始 ， 引 导读 者 逐步 深入 地 学 习 各 种 应 用 技巧 ， 并 侧重 实战 技能 ， 使 用 简单 易 懂 的 实际 案例 进 
行 分 析 和 操作 指导 ， 让 读者 读 起 来 简明 轻松 ， 操 作 起 来 有 章 可 循 。 

e ”随时 检测 自己 的 学 习 成 果 

每 章 首页 中 ， 均 提供 了 学 习 目 标 ， 以 指导 读者 重点 学 习 及 学 后 检查 。 

大 部 分 章节 最 后 的 “ 跟 我 学 上 机 ”板块 ， 均 根据 本 章 内 容 精 选 而 成 ， 读 者 可 以 随时 检测 
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自己 的 学 习 成 果 和 实战 能 力 ， 做 到 融会 贯 j 

e ”细致 入 微 、 贴 心 提示 

本 书 在 讲解 过 程 中 ， 在 各 章 使 用 了 “注意 ”“ 提 示 ”“ 技 巧 ”等 小 贴 士 ， 使 读者 在 学 习 
过 程 中 更 清楚 地 了 解 相 关 操 作 、 相 关 概 念 ， 并 轻松 掌握 各 种 操作 技巧 。 

© ”专业 创作 团队 和 技术 支持 

本 书 由 千 谷 高 新 教育 中 心 编著 和 提供 技术 支持 。 

您 在 学 习 过 程 中 遇 到 任何 问题 ， 可 加 入 QQ 群 (案例 课堂 VIP)451102631 进行 提问 ， 专 家 
人 员 会 在 线 答疑 。 


超 值 资源 大 放送 


e@ 全程 同步 教学 录像 

涵盖 本 书 所 有 知识 点 ， 详 细 讲 解 每 个 实例 及 项 目的 过 程 及 技术 关键 点 。 比 看 书 更 轻松 地 
掌握 书 中 所 有 的 网 页 制作 和 设计 知识 ， 而 且 扩 展 的 讲解 部 分 可 使 您 得 到 比 书 中 更 多 的 收获 。 

o 超 多 容量 王牌 资源 

赠送 大 量 王牌 资源 ， 包 括 实例 源 代码 、 教 学 幻灯 片 、 本 书 精品 教学 视 Ep 
频 、88 个 实用 类 网 页 模板 、12 部 网 页 开发 必 备 参考 手册 、HTML 5 标签 速 查 gin 
手册 、 精 选 的 JavaScript 实例 、CSS 3 属性 速 查 表 、JavaScript 函数 速 查 手 
册 、CSS+DIV 布局 赏析 案例 、 精 彩 网 站 配色 方案 赏析 、 网 页 样式 与 布局 案 
例 赏析 、Web 前 端 工 程 师 常见 面试 题 等 。 读 者 可 以 通过 QQ 群 (案例 课堂 
VIP)451102631 获取 赠送 资源 ， 也 可 以 扫描 二 维 码 ， 下 载 本 书 资源 。 


读者 对 象 


没有 任何 网 页 设计 基础 的 初学 者 。 

有 一 定 的 HTML 5 基础 ， 想 精通 网 页 制作 和 设计 的 人 员 。 
有 一 定 的 HTML 5 基础 ， 没 有 项 目 经 验 的 人 员 。 

正在 进行 毕业 设计 的 学 生 。 

大 专 院 校 及 培训 学 校 的 老师 和 学 生 。 


创作 团队 


本 书 由 刘 春 茂 编著 ， 参 加 编写 的 人 员 还 有 刘 玉 萍 、 张 金 伟 、 蒲 娟 、 周 佳 、 付 红 、 李 园 、 
郭 广 新 、 侯 永 岗 、 王 攀登 、 刘 海松 、 孙 若 淞 、 王 月 娇 、 包 慧 利 、 陈 伟 光 、 胡 同 夫 、 王 伟 、 展 
娜 娜 、 李 琪 、 梁 云 梁 和 周 浩 浩 。 在 编写 过 程 中 ， 我 们 力 尽 所 能 地 将 最 好 的 讲解 呈现 给 读者 ， 
但 也 难免 有 玻 漏 和 不 妥 之 处 ， 敬 请 不 音 指正 。 若 您 在 学 习 中 遇 到 困难 或 疑问 ， 或 有 何 建 议 ， 
可 写 信 至 信箱 357975357@qq.com. 
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第 1 章 
新 一 代 Web 前 端 
技术 HTML 5 


目前 ， 网 络 已 经 成 为 人 们 娱乐 、 工 作 中 不 可 或 缺 的 一 部 分 。 网 页 设计 也 成 为 学 
习 计算 机 知识 的 重要 内 容 之 一 。 制 作 网 页 可 以 采用 可 视 化 编辑 软件 ， 但 是 无 论 采 用 
哪 一 种 网 页 编辑 软件 ， 最 后 都 是 将 所 设计 的 网 页 转化 为 HTML. 

HIML 是 网 页 设计 的 基础 语言 。 本 章 将 介绍 HIML 的 基本 概念 和 编写 方法 及 
浏览 HTML 文件 的 方法 ， 使 读者 初步 了 解 HIML， 为 后 面 的 学 习 打 下 基础 。 


重点 案例 效果 
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1.1 HTML 的 基本 概念 


互联 网 上 的 信息 是 以 网 页 形式 展示 给 用 户 的 ， 网 页 是 网 络 信息 传递 的 载体 。 网 页 文件 是 
用 标记 语言 书写 的 ， 这 种 语言 称 为 超 文本 标记 语言 (Hyper Text Markup Language, HTML). 


1.1.1 HTML 的 发 展 历程 


HTML 是 一 种 描述 语言 ， 而 不 是 一 种 编程 语言 ， 主 要 用 于 描述 超 文 本 中 内 容 的 显示 方 
式 。 标 记 语言 从 诞生 至 今 ， 经 历 了 20 多 年 ， 发 展 过程 中 也 有 很 多 曲折 ， 经 历 的 版 本 及 发 布 日 
期 如 表 1-1 所 示 。 


R11 超 文本 标记 语言 的 发 展 历程 























版 本 发 布 日 期 说 明 

pt g 1993 4 6 H 作为 互联 网 工程 工作 小 组 (GETF) 工 作 草 案 发 布 (并 非 标准 ) 

1995 411 作为 RFC 1866 发 布 ， 在 RFC 2854 于 2000 年 6 月 发 布 之 后 
被 宣布 已 经 过 时 

HTML 3.2 1996 £1 H 144 W3C 推荐 标准 

HTML 4.0 1997 年 12 月 18 日 W3C 推荐 标准 

HTML 4.01 1999 4 12 H 24 H 微小 改进 ，W3C 推荐 标准 

BONM 20004 3 15 B 基于 严格 的 HTML 4.01 语法 ， 是 国际 标准 化 组 织 和 国际 电 
工 委员 会 的 标准 

XHTML 1.0 2000 年 1 月 26 日 W3C 推荐 标准 (修订 后 于 2002 年 8 月 1 日 重新 发 布 

XHTML 1.1 2001 年 5 月 31 日 较 1.0 有 微小 改进 

XHTML 2.0 草案 | 没有 发 布 2009 年 ，W3C 停止 了 XHTML 2.0 工作 组 的 工作 

HTML 5 2014 4F 10 H HTML 5 标准 规范 最 终 制定 完成 


1.1.2 什么 是 HTML 


HIML 5 不 是 一 种 编程 语言 ， 而 是 一 种 描述 性 的 标记 语言 ， 用 于 描述 超 文本 中 的 内 容 和 
结构 。HTML 最 基本 的 语法 是 < 标记 符 ></ 标 记 符 >。 标 记 符 通常 都 是 成 对 使 用 的 ， 有 一 个 开头 
标记 和 一 个 结束 标记 。 结 束 标记 只 是 在 开头 标记 的 前 面 加 一 个 斜 本 “/”。 当 浏览 器 收 到 
HIML 文件 后 ， 就 会 解释 里 面 的 标记 符 ， 然 后 把 标记 符 相对 应 的 功能 表达 出 来 。 

例如 ， 在 HTML 中 用 <p></p> 标 记 符 来 定义 一 个 换行 符 。 当 浏览 器 遇 到 <p></p> 标 记 符 
时 ， 会 把 该 标记 中 的 内 容 自 动 形成 一 个 段落 。 当 遇 到 <br /> 标记 符 时 ， 会 自动 换行 ， 并 且 该 标 
记 符 后 的 内 容 会 从 一 个 新 行 开始 。 这 里 的 <br 人 标记 符 是 单 标记 ， 没 有 结束 标记 ， 标 记 后 的 
“/” 符 号 可 以 省 略 ; 但 为 了 使 代码 规范 ， 一 般 建 议 加 上 。 


1.1.3 HTML 5 文件 的 基本 结构 


完整 的 HTML 文件 包括 标题 、 段 落 、 列 表 、 表 格 、 绘 制 的 图 形 及 各 种 嵌入 对 象 ， 这 些 对 
象 统称 为 HTML 元 素 。 一 个 HTML 5 文件 的 基本 结构 如 下 : 


<!DOCTYPE html> 


<html> 文件 开始 的 标记 
<head> 文件 头 部 开始 的 标记 
ve 文件 头 部 的 内 容 
</head> 文件 头 部 结束 的 标记 
<body> 文件 主体 开始 的 标记 
ae 文件 主体 的 内 容 
</body> 文件 主体 结束 的 标记 
</html> 文件 结束 的 标记 


从 上 述 代码 结构 可 以 看 出 ， 在 HTML 文件 中 ， 所 有 的 标记 都 是 相对 应 的 ， 开 头 标记 为 
< >， 结 束 标记 为 </>， 在 这 两 个 标记 中 间 添 加 内 容 。 这 些 基 本 标记 的 使 用 方法 及 详细 解释 见 
第 2 章 。 


1.2 HTML 5 的 优势 


从 HTML 4.0, XHTML 到 HTML 5， 在 某 种 意义 上 讲 ， 这 是 HTML 描述 性 标记 语言 的 一 
种 更 加 规范 的 过 程 。 因 此 ，HTML 5 并 没有 给 开发 者 带 来 多 大 的 冲击 。 但 HTML 5 也 增加 了 
很 多 非常 实用 的 新 功能 。 下 面 来 介绍 HTML 5 的 一 些 优势 。 


1.2.1 解决 了 跨 浏览 器 问题 


浏览 器 是 网 页 的 运行 环境 ， 因 此 浏览 器 的 类 型 也 是 在 网 页 设计 时 会 遇 到 的 一 个 问题 。 由 
于 各 个 软件 厂商 对 HIML 标准 的 支持 有 所 不 同 ， 导 致 同样 的 网 页 在 不 同 的 浏览 器 中 会 有 不 同 
的 表现 。 并 且 HTML 5 新 增 的 功能 在 各 个 浏览 器 中 的 支持 程度 也 不 一 致 ， 浏 览 器 的 因素 变 得 
比 以 往 传统 的 网 页 设计 更 加 重要 。 

为 了 保证 设计 出 来 的 网 页 在 不 同 浏览 器 中 的 效果 一 致 ，HIML 5 会 让 问题 简单 化 ， 具 备 
友好 的 跨 浏览 器 性 能 。 针 对 不 支持 新 标签 的 老式 TE 浏览 器 ， 用 户 只 要 简单 地 添加 JavaScript 
代码 ， 就 可 以 让 它们 使 用 新 的 HTML 5 元 素 。 


1.2.2 ”新 增 了 多 个 新 特性 


HTML 语言 从 1.0 至 5.0 经 历 了 巨大 变化 ， 从 单一 的 文本 显示 功能 到 图 文 并 茂 的 多 媒体 显 
示 功 能 ， 许 多 特性 经 过 多 年 的 完善 ， 已 经 成 为 一 种 非常 重要 的 标记 语言 。 尤 其 是 HTML 5, 
对 多 媒体 的 支持 功能 更 强 ， 它 具备 如 下 功能 。 

(1) 新 增 了 语义 化 标签 ， 使 文档 结构 明确 。 

D 新 的 文档 对 象 模型 (DOM)。 
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(3) 实现 了 2D 绘图 的 Canvas 对 象 。 

(4) 可 控 媒 体 播放 。 

(5) 离线 存储 。 

(6) 文档 编辑 。 

(7) 拖 放 。 

(8) 跨 文档 消息 。 

(9) 浏览 器 历史 管理 。 

(10) MIME 类 型 和 协议 注册 。 

对 于 这 些 新 功能 ， 支 持 HTML 5 的 浏览 器 在 处 理 HTML 5 代码 错误 的 时 候 必须 更 灵活 ， 
而 那些 不 支持 HTML 5 的 浏览 器 将 忽略 HTML 5 代码 。 


123 用 户 优先 的 原则 


HTML 5 标准 的 制定 是 以 用 户 优先 为 原则 的 ， 一 旦 遇 到 无 法 解决 的 冲突 时 ， 规 范 会 把 用 
户 放 到 第 一 位 ， 其 次 是 网 页 的 作者 ， 再 次 是 浏览 器 ， 接 着 是 规范 制定 者 (W3C/WHATWG)， 最 
后 才 考 虑 理论 的 纯粹 性 。 所 以 ， 总 体 来 看 ，HTML 5 的 绝 大 部 分 特性 还 是 实用 的 ， 只 是 有 些 
情况 下 还 不 够 完美 。 

举例 说 明 一 下 ， 下 述 三 行 代码 虽然 有 所 不 同 ， 但 在 HTML 5 中 都 能 被 正确 识别 : 

id="HTML 5" 

id=HTML 5 

ID="HTML 5" 

在 上 述 示 例 中 ， 除 了 第 一 个 外 ， 另 外 两 个 语法 都 不 是 很 严格 ， 这 种 不 严格 的 语法 被 广泛 
使 用 ， 受 到 一 些 技术 人 员 的 反对 。 但 是 无 论语 法 严格 与 否 ， 对 网 页 查看 者 来 说 都 没有 任何 影 
响 ， 他 们 只 需要 看 到 想 要 的 网 页 效果 就 可 以 了 。 

为 了 增强 HTML 5 的 使 用 体验 ， 还 加 强 了 以 下 两 个 方面 的 设计 。 


1. 安全 机 制 的 设计 


为 确保 HTML 5 的 安全 ， 在 设计 HTML 5 时 做 了 很 多 针对 安全 的 设计 。HTML 5 引入 了 
一 种 新 的 基于 来 源 的 安全 模型 ， 该 模型 不 仅 易 用 ， 而 且 对 各 种 不 同 的 API 都 通用 。 使 用 这 个 
安全 模型 ， 可 以 做 一 些 以 前 做 不 到 的 事情 ， 不 需要 借助 于 任何 所 谓 聪明 、 有 创意 却 不 安全 的 
Hack 就 能 跨 域 进行 安全 对 话 。 

2. 表现 和 内 容 分 离 


表现 和 内 容 分 离 是 HTML 5 设计 中 的 另 一 个 重要 内 容 。HIML 5 在 所 有 可 能 的 地 方 都 努 
力 进 行 了 分 离 ， 也 包括 CSS。 实 际 上 ， 表 现 和 内 容 的 分 离 早 在 HIML 4 中 就 有 设计 ， 只 是 分 
离 得 并 不 彻底 。 为 了 避免 可 访问 性 差 、 代 码 高 复杂 度 、 文 件 过 大 等 问题 HTML 5 规范 中 更 
细致 、 清 晰 地 分 离 了 表现 和 内 容 。 但 是 出 于 HTML 5 兼容 性 的 考虑 ， 一 些 老 的 表现 和 内 容 的 
代码 还 是 可 以 兼容 使 用 的 。 


124 化 繁 为 简 的 优势 


作为 当下 流行 的 通用 标记 语言 ，HTML 5 越 简 单 越 好 。 所 以 在 设计 HTML 5 时 ， 严 格 遵 
循 了 “简单 至 上 ”的 原则 ， 主 要 体现 在 以 下 几 个 方面 。 

(1) 新 的 简化 的 字符 集 声明 。 

(2) 新 的 简化 的 DOCTYPE。 

(3) 简单 而 强大 的 HTML 5 API。 

(4) 以 浏览 器 原生 能 力 蔡 代 复 杂 的 JavaScript 代码 。 

为 了 实现 以 上 这 些 简 化 操作 ，HTML 5 规范 需要 比 以 前 更 加 细致 、 精 确 ， 比 以 往 任何 版 
本 的 HTML 规范 都 要 精确 。 

在 HTML 5 规范 细 化 的 过 程 中 ， 为 了 避免 造成 误解 ， 几 乎 对 所 有 内 容 都 给 出 了 彻底 、 完 
全 的 定义 ， 特 别 是 对 Web 应 用 。 

基于 多 种 改进 过 的 、 强 大 的 错误 处 理 方案 ，HTML 5 具备 了 良好 的 错误 处 理 机 制 。 具 体 
Küt, HTML 5 提倡 重大 错误 的 平缓 恢复 ， 再 次 把 最 终 用 户 的 利益 放 在 了 第 一 位 。 举 例 说 ， 
如 果 页 面 中 有 错误 的 话 ， 在 以 前 ， 可 能 会 影响 整个 页 面 的 显示 ， 而 在 HTML 5 中 ， 不 会 出 现 
这 种 情况 ， 取 而 代 之 的 是 以 标准 方式 显示 broken 标记 ， 这 要 归功 于 HTML 5 中 精确 定义 的 错 
误 恢 复 机 制 。 


1.3 HTML 5 网 页 的 开发 环境 


有 两 种 方式 可 以 产生 HTML 文件 : 一 是 自己 写 HTML 文件 ， 事 实 上 这 并 不 是 很 困难 ， 也 
不 需要 特别 的 技巧 ， 二 是 使 用 HIML 编辑 器 ， 它 可 以 辅助 使 用 者 来 做 编写 工作 。 


1.3.1 案例 1 一 一 使 用 记事 本 手工 编写 HTML 5 


前 面 介 绍 过 ，HTML 5 是 一 种 标记 语言 ， 其 代码 是 以 文本 形式 存在 的 。 因 此 ， 所 有 的 记 
事 本 工具 都 可 以 作为 它 的 开发 环境 。 
HTML 文件 的 扩展 名 为 .html 或 .htm， 将 HTML 源 代码 输入 到 记事 本 并 保存 之 后 ， 可 以 在 
浏览 器 中 打开 文档 以 查看 其 效果 。 
使 用 记事 本 编写 HTML 文件 的 具体 操作 步骤 如 下 。 
CESID 单 击 Windows 桌面 上 的 “开始 ”按钮 ， 选 择 “ 所 有 程序 ”一 “附件 ”一 “记事 
本 ”命令 ， 打 开 一 个 记事 本 ， 在 记事 本 中 输入 HIML 代码 ， 如 图 1-1 所 示 。 
Gea 编辑 完 HTML 文件 后 ， 选 择 “ 文 件 ” 一 “保存 ”菜单 命令 或 按 Cres 组 合 键 ， 
在 弹出 的 “另存 为 ”对 话 框 中 ， 设 置 “ 保 存 类 型 ”为 “所 有 文件 ”， 然 后 将 文件 扩 
展 名 设 为 .html 或 htm， 如 图 1-2 所 示 。 
GED 单 击 “ 保 在” 按钮， 即 可 保存 文件 。 打 开 网 页 文档 ， 在 浏览 器 中 预览 ， 如 图 1-3 
所 示 。 
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图 1-1 输入 HTML 代码 图 1-2 “另存 为 ”对 话 框 





(TOD ems- ox 


SA) SRD SEV) LERA IAM WHH 
今天 我 编写 了 第 一 个 简单 网 页 ， 感 觉 非常 高 兴 。 




















图 1-3 ”网 页 的 浏览 效果 


1.3.2 ”案例 2 一 一 使 用 Dreamweaver CC 编写 HTML 文件 


“ 工 欲 善 其 事 ， 必 先 利 其 器 ”， 虽 然 使 用 记事 本 可 以 编写 HTML 文件， 但 是 编写 效率 太 
低 ， 对 于 语法 错误 及 格式 都 没有 提示 。 于 是 ， 很 多 专门 编写 HTML 网 页 的 工具 弥补 了 这 种 缺 
陷 。Adobe 公司 的 Dreamweaver CC 用 户 界面 非常 友好 ， 是 一 款 非常 优秀 的 网 页 开发 工具 ， 深 
受 广 大 用 户 的 喜爱 。Dreamweaver CC 的 主 界面 如 图 1-4 所 示 。 

1. 文档 窗口 


文档 窗口 位 于 界面 的 中 部 ， 它 是 用 来 编排 网 页 的 区 域 ， 与 在 浏览 器 中 的 结果 相似 。 在 文 
档 窗口 中 ， 可 以 将 文档 分 为 3 种 视图 显示 模式 。 


(1) 代码 视图 。 使 用 代码 视图 ， 可 以 在 文档 窗口 中 显示 当前 文档 的 源 代码 ， 也 可 以 在 该 
窗口 中 直接 输入 HTML 代码 。 


(2) 设计 视图 。 在 设计 视图 下 无 须 编辑 任何 代码 ， 可 以 直接 使 用 可 视 化 的 操作 编辑 
网 页 。 


(3) 拆 分 视图 。 在 拆 分 视图 下 ， 左 半 部 分 显示 代码 视图 ， 右 半 部 分 显示 设计 视图 。 在 这 


种 视图 模式 下 ， 可 以 通过 输入 HTML 代码 直接 观看 效果 ， 还 可 以 通过 设计 视图 插入 对 象 ， 直 
接 查 看 源 文件 。 

在 各 种 视图 间 进 行 切换 时 ， 只 需要 在 文档 工具 栏 中 单 击 相应 的 视图 按钮 即 可 。 文 档 工具 
栏 如 图 1-5 所 示 。 
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图 1-4 Dreamweaver CC 的 主 界面 
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图 1-5 文档 工具 栏 











2. “插入 ”面板 


“插入 ”面板 是 在 设计 视图 下 使 用 频 度 很 高 的 面板 之 一 。“ 插 
入 ”面板 默认 打开 的 是 “常用 ”页 ， 它 包括 了 最 常用 的 一 些 对 象 。 例 
如 ， 在 文档 中 的 光标 位 置 插入 一 段 文本 、 图 像 或 表格 等 。 用 户 可 以 根 
据 需 要 切换 到 其 他 页 ， 如 图 1-6 所 示 。 


3，“ 属 性 ”面板 


“属性 ”面板 中 主要 包含 当前 选择 的 对 象 相关 属性 的 设置 。 可 以 
通过 菜单 栏 中 的 “窗口 ”一 “属性 ”命令 或 Cul+F3 组 合 键 打开 或 关闭 
“属性 ”面板 。 

“属性 ”面板 是 常用 的 一 个 面板 ， 因 为 无 论 要 编辑 哪个 对 象 的 属性 ， 都 要 用 到 它 。 其 内 
容 也 会 随 着 选择 对 象 的 不 同 而 改变 。 例 如 ， 当 光标 定位 在 文档 主体 文字 内 容 部 分 时 ，“ 属 
性 ”面板 显示 文字 的 相关 属性 ， 如 图 1-7 所 示 。 

Dreamweaver CC 中 还 有 很 多 面板 ， 在 以 后 使 用 时 ， 再 做 详细 讲解 。 打 开 的 面板 越 多 ， 编 
辑 文档 的 区 域 就 会 越 小 ， 为 了 便于 编辑 文档 ， 可 以 通过 F4 功能 键 快速 隐藏 和 显示 所 有 面板 。 





图 1-6 “插入 ”面板 
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1-7 “属性 ”面板 
使 用 Dreamweaver CC 编写 HTML 文件 的 具体 操作 步骤 如 下 。 
EC 启动 Dreamweaver CC， 如 图 1-8 所 示 ， 在 欢迎 屏幕 的 “新 建 ” 栏 中 选择 HTML 
选项 。 或 者 选择 菜单 栏 中 的 “文件 ”一 “新 建 ” 命 令 (快捷 键 为 Ctl+N)。 
CIID 弹出 “新 建文 档 ” 对 话 框 ， 如 图 1-9 所 示 ， 在 “页 面 类 型 ”列表 框 中 选择 
“HTML 模板 ”选项 。 
CS 单 击 “ 创 建 ”按钮 ， 创 建 HTML 文件 ， 如 图 1-10 所 示 。 
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图 1-8 包含 欢迎 屏幕 的 主 界面 图 1-9 “新 建文 档 ” 对 话 框 

SER 在 文档 工具 栏 中 ， 单 击 “ 代 码 ” 按 钮 ， 切 换 到 代码 视图 ， 如 图 1-11 所 示 。 
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F <1doctype html> 
<html> 

hai <head> 
p pe ere > 
Ej </head> 
$ <body: 

E CEE KILES & 

= Ù 

E «resp 
[s] </html: 
2 

E 1-10 在 设计 视图 下 显示 创建 的 文档 1-11 在 代码 视图 下 显示 创建 的 文档 


GSS 修改 HTML 文档 标题 ， 将 代码 中 <title> 标 记 中 的 网 页 标题 修改 成 “第 一 个 网 
页 ”。 然 后 在 <body> 标 记 中 输入 “今天 我 使 用 Dreamweaver CC 编写 了 第 一 个 简单 
网 页 ， 感觉 非常 高 兴 。”。 


完整 的 HTML 代码 如 下 所 示 : 
<!doctype html > 
<html> 


<head> 

<meta charset=utf-8" /> 

<title> 第 一 个 网 页 </title> 

</head> 

<body> 

今天 我 使 用 Dreamweaver cc 编写 了 第 一 个 简单 网 页 ， 感 觉 非 常 高 兴 。 
</body> 

</html> 


EID 保存 文件 。 从 菜单 栏 中 选择 “文件 ”一 “保存 ”命令 或 按 CtrltS 组 合 键 ， 弹 出 
“另存 为 ”对 话 框 。 在 该 对 话 框 中 设置 保存 位 置 ， 并 输入 文件 名 ， 单 击 “ 保 存 ” 按 
钮 ， 如 图 1-12 所 示 。 

ID 单 击 文 档 工具 栏 中 的 辆 图 标 ， 选 择 查 看 网 页 的 浏览 器 ， 或 按 功 能 键 F12， 使 用 
默认 浏览 器 查看 网 页 ， 预 览 效 果 如 图 1-13 所 示 。 
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图 1-12 保存 文件 图 1-13 浏览 器 预览 效果 


1.4 ”使 用 浏览 器 查看 HTML 5 文件 


开发 者 经 常 需要 查看 HTML 源 代码 及 其 效果 。 使 用 浏览 器 可 以 查看 网 页 的 显示 效果 ， 也 
可 以 在 浏览 器 中 直接 查看 HIML 源 代码 。 


1.4.1 案例 3 一 一 查看 页 面 效果 


前 面 已 经 介绍 过 ， 为 了 测试 网 页 的 兼容 性 ， 可 以 在 不 同 的 浏览 器 中 打开 网 页 。 在 非 默 认 
浏览 器 中 打开 网 页 的 方法 有 很 多 种 ， 在 此 介绍 两 种 常用 的 方法 。 

(1) 选择 浏览 器 中 的 “文件 ”一 “打开 ”命令 (有 些 浏览 器 的 菜单 命令 为 “打开 文件 ”)， 
选择 要 打开 的 网 页 即 可 ， 如 图 1-14 所 示 。 

(2) 在 HTML 文件 上 右 击 ， 从 弹出 的 快捷 菜单 中 选择 “打开 方式 ”命令 ， 然 后 选择 需要 
的 浏览 器 ， 如 图 1-15 所 示 。 如 果 浏 览 器 没有 出 现在 菜单 中 ， 可 以 选择 “选择 其 他 应 用 ” 命 
令 ， 在 计算 机 中 查找 浏览 器 程序 。 
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1-14 选择 “打开 ”命令 1-15 ”选择 不 同 的 浏览 器 来 打开 网 页 


1.4.2 ”案例 4 一 一 查看 源 文件 
查看 网 页 源 代码 的 常见 方法 有 以 下 两 种 。 


(1) 在 页 面 空 白 处 右 击 ， 从 弹出 的 快捷 菜单 中 选择 “查看 源 ” 命 令 ， 如 图 1-16 所 示 。 
(2) 在 浏览 器 的 菜单 栏 中 选择 “查看 ”一 “ 源 ” 命 令 ， 如 图 1-17 所 示 。 
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图 1-16 选择 “查看 源 ”命令 1-17 选择 “ 源 ”命令 


ST 由 于 浏览 器 的 规定 各 不 相同 ， 有 些 浏览 器 将 “查看 源 ”命名 为 “查看 源 代 
SN 码 " ， 但 是 ， 操 作 方法 完全 相同 。 


15 SFR 


疑问 1: 为 何 使 用 记事 本 编辑 的 HTML 文件 无 法 在 浏览 器 中 预览 ， 而 是 直接 在 记事 本 中 打开 ? 


答 : 很 多 初学 者 ， 在 保存 文件 时 ， 没 有 将 HTML 文件 的 扩展 名 .html 或 .htm 作为 文件 的 后 
级 ， 导 致 文件 还 是 以 .txt 为 扩展 名 ， 因 此 无 法 在 浏览 器 中 查看 。 如 果 读 者 是 通过 右 击 鼠标 创建 
记事 本 文件 的 ， 在 为 文件 重 命 名 时 ， 一 定 要 以 .html 或 htm 作为 文件 的 后 绥 。 特 别 要 注意 的 
是 ， 当 Windows 系统 的 扩展 名 隐藏 时 ， 更 容易 出 现 这 样 的 错误 。 读 者 可 以 在 “文件 夹 选 项 ” 
对 话 框 中 查看 是 否 显示 扩展 名 。 


疑问 2: 如 何 显示 或 隐藏 Dreamweaver CC 的 欢迎 屏幕 ? 


答 : Dreamweaver CC 的 欢迎 屏幕 可 以 帮助 使 用 者 快速 进行 打开 文件 、 新 建文 件 和 获取 相 
关 帮 助 的 操作 。 如 果 读 者 不 希望 显示 该 欢迎 屏幕 ， 可 以 按 Ctl+U 组 合 键 ， 在 弹出 的 窗口 中 ， 
选择 左 侧 的 “常规 ” 页， 将 右 侧 “文档 选项 ”部 分 的 “显示 欢迎 屏幕 ” 复 选 框 取消 勾 选 。 
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2.1 HTML 5 文件 的 基本 结构 


在 一 个 HTML 5 文档 中 ， 必 须 包 含 <HTML></HTML> 标 记 ， 并 且 放 在 一 个 HIML 5 文档 
中 的 开始 和 结束 位 置 。 即 每 个 文档 以 <HTML> 开 始 ， 以 </HTML> 结 束 。<HTML></HTML> 之 
间 通 常 包含 两 个 部 分 ， 分 别 为 <HEAD></HEAD> 和 <BODY></BODY> 。HEAD 标记 包含 
HTML 头 部 信息 ， 如 文档 标题 、 样 式 定义 等 。BODY 包含 文档 主体 部 分 ， 即 网 页 内 容 。 需 要 
注意 的 是 ，HTML 标记 不 区 分 大 小 写 。 


2.1.1 HTML 5 页 面 的 整体 结构 


为 了 便于 读者 从 整体 上 把 握 HTML 5 的 文档 结构 ， 我 们 通过 一 个 HTML 5 页 面 来 介绍 
HTML 5 页 面 的 整体 结构 。 示 例 代码 如 下 : 


<!DOCTYPE HTML> 
<HTML> 
<HEAD> 

<TITLE> 网 页 标题 </TITLE> 
</HEAD> 
<BODY> 


网 页 内 容 

</BODY> 

</HTML> 

从 上 述 代码 可 以 看 出 ， 一 个 基本 的 HTML 5 网 页 由 以 下 几 个 部 分 构成 。 

(1) <!DOCTYPE HTML> 声 明 。 该 声明 必须 位 于 HTML 5 文档 中 的 第 一 行 ， 也 就 是 位 于 
<HTMIL> 标 记 之 前 。 该 标记 告知 浏览 器 文档 所 使 用 的 HTML 规范 。<!DOCTYPE HTML> 声 明 
不 属于 HTML 标记 ; 它 是 一 条 指令 ， 告 诉 浏览 器 编写 页 面 所 用 的 标记 的 版 本 。 由 于 HTML 5 
版 本 还 没有 得 到 浏览 器 的 完全 认可 ， 后 面 介绍 时 还 采用 以 前 的 通用 标准 。 

(2) <HTML></HTML> 标 记 。 说 明 本 页 面 是 用 HTML 语言 编写 的 ， 使 浏览 器 软件 能 够 准 
确 无 误 地 解释 和 显示 。 

(3) <HEAD></HEAD> 标 记 。 这 是 HTML 的 头 部 标记 。 头 部 信息 不 显示 在 网 页 中 。 此 标 
记 内 可 以 包含 一 些 其 他 标记 ， 用 于 说 明文 件 标题 和 整个 文件 的 一 些 公用 属性 。 可 以 通过 
<style> 标 记 定义 CSS 样式 表 ， 通 过 <scrip 记 标记 定义 JavaScript 脚本 文件 。 

(4) <TITLE></TITLE> 标 记 。TITLE 是 HEAD 中 的 重要 组 成 部 分 ， 它 包含 的 内 容 显 示 在 
浏览 器 的 窗口 标题 栏 中 。 如 果 没 有 TITLE， 浏 览 器 标题 栏 将 显示 本 页 的 文件 名 。 

(5) <BODY></BODY> 标 记 。BODY 包含 HTML 页 面 的 实际 内 容 ， 显 示 在 浏览 器 窗口 的 
客户 区 中 。 例 如 ， 在 页 面 中 ， 文 字 、 图 像 、 动 画 、 超 链接 以 及 其 他 HTML 相关 的 内 容 都 是 定 
义 在 BODY 标记 里 面 的 。 


2.1.2 HTML 5 新 增 的 结构 标记 


HTML 5 新 增 的 结构 标记 有 <footer></footer> 和 <header></header> 标 记 。 但 是 ， 这 两 个 标 


记 还 没有 获得 大 多 数 浏览 器 的 支持 ， 这 里 只 简单 地 介绍 一 下 。 
<header> 标 记 定义 文档 的 页 眉 (介绍 信息 )。 使 用 示例 如 下 : 


<header> 
<h1> 欢 迎 访问 主页 </h1> 


</header> 
<footer> 标 记 定 义 section 或 document 的 页 脚 。 在 典型 情况 下 ， 该 元 素 会 包含 创作 者 的 姓 
名 、 文 档 的 创作 日 期 或 者 联系 信息 。 使 用 示例 如 下 : 


<footer> 作 者 : 元 澈 ”联系 方式 : 13012345678</footer> 


2.2 HTML 5 基本 标记 详解 


HTML 文档 最 基本 的 结构 主要 包括 文档 类 型 说 明 、HTML 文档 开始 标记 、 元 信息 、 主 体 
标记 和 页 面 注 释 标记 。 


2.2.1 文档 类 型 说 明 


基于 HTML 5 设计 准则 中 的 化 繁 为 简 原则 ，Web 页 面 的 文档 类 型 说 明 (DOCTYPE) 被 极 大 
地 简化 了 。 

细心 的 读者 会 发 现 ， 在 第 1 章 中 使 用 Dreamweaver CC 创建 HTML 5 文档 时 ， 文 档 头 部 
的 类 型 说 明代 码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http: //www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 


上 述 代码 为 XHTML 文档 类 型 说 明 。 可 以 看 到 ， 这 段 代 码 既 麻烦 又 难 记 。HTML 5 对 文 
档 类 型 进行 了 简化 ， 简 单 到 15 个 字符 即 可 ， 代 码 如 下 : 


<!DOCTYPE html> 


~? 
E DOCTYPE 声明 需要 出 现在 HIML 5 文件 的 第 一 行 。 
意 


2.2.2 HTML 标记 


HTML 标记 代表 文档 的 开始 。 由 于 HTML 5 语言 语法 的 松散 特性 ， 该 标记 可 以 省 略 。 但 
是 为 了 使 之 符合 Web 标准 和 体现 文档 的 完整 性 ， 应 养 成 良好 的 编写 习惯 ， 这 里 建议 不 要 省 略 
该 标记 。 

HTML 标记 以 <html> 开 头 ， 以 </html> 结 尾 ， 文 档 的 所 有 内 容 书 写 在 开头 和 结尾 的 中 间 部 
分 。 其 语法 格式 如 下 : 


<html> 


</html> 
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2.2.3 Stic head 
头 标记 head 用 于 说 明文 档 头 部 的 相关 信息 ， 一 般 包括 标题 信息 、 元 信息 、 定 义 CSS 样式 
和 脚本 代码 等 。HTML 的 头 部 信息 以 <head> 开 始 ， 以 </head> 结 束 ， 语 法 格式 如 下 : 
<head> 
JEEE 
ST <head> 元 素 的 作用 范围 是 整 篇 文档 ， 并 且 定义 在 HTML 语言 头 部 的 内 容 往往 


SS 不 会 在 网 页 上 直接 显示 。 
在 头 标记 <head> 与 </head> 之 间 还 可 以 插入 标题 标记 title 和 元 信息 标记 


meta 等 o 





1. 标题 标记 title 

HTML 页 面 的 标题 一 般 是 用 来 说 明 页 面 用 途 的 ， 它 显示 在 浏览 器 的 标题 栏 中 。 在 HTML 
文档 中 ， 标 题 信 息 设置 在 <head> 与 </head> 之 间 。 标 题 标 记 以 <title> 开 始 ， 以 </title> 结 束 ， 语 
法 格式 如 下 : 

<title> 

</title> 

在 标记 中 间 的 “...” 就 是 标题 的 内 容 ， 它 可 以 帮助 用 户 更 好 地 识别 页 面 。 在 预览 网 页 
时 ， 设 置 的 标题 在 浏览 器 的 左上 方 标题 栏 中 显示 ， 如 图 2-1 所 示 。 此 外 ， 在 Windows 任务 栏 
中 显示 的 也 是 这 个 标题 。 页 面 的 标题 只 有 一 个 ， 位 于 HTML 文档 的 头 部 。 
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图 2-1 标题 栏 在 浏览 器 中 的 显示 效果 


2. 元 信息 标记 meta 

<meta> 元 素 可 提供 有 关 页 面 的 元 信息 (meta-information)， 比 如 针对 搜索 引擎 和 更 新 频 度 的 
描述 和 关键 词 。<meta> 标 记 位 于 文档 的 头 部 ， 不 包含 任何 内 容 。<meta> 标 记 的 属性 定义 了 与 
文档 相关 联 的 名 称 / 值 对 。<meta> 标 记 提 供 的 属性 及 其 取 值 如 表 2-1 所 示 。 


Oe 


表 2-1 <meta> 标 记 提供 的 属性 及 其 取 值 


属 性 值 H 述 
charset character encoding 


Content some text 


定义 文档 的 字符 编码 
定义 与 http-equiv 或 name 属性 相关 的 元 信息 








content-type 
expires 
refresh 


set-cookie 


http-equiv {E content 属性 关联 到 HTTP 头 部 


author 
description 


keywords 
name 4E content 属性 关联 到 一 个 名 称 
generator 


Tevised 





others 


1) ”字符 集 charset 属性 

在 HTML 5 中 ， 有 一 个 新 的 charset 属性 ， 它 使 字符 集 的 定义 更 加 容易 。 例 如 ， 下 面 的 代 
码 告 诉 浏览 器 ， 网 页 使 用 ISO-8859-1 字符 集 显 示 : 

<meta charset="ISO-8859-1"> 

2) ”搜索 引擎 的 关键 词 

在 早期 ，meta keywords 关键 词 对 搜索 引擎 的 排名 算法 起 到 一 定 的 作用 ， 也 是 很 多 人 进行 
网 页 优化 的 基础 。 关 键 词 在 浏览 时 是 看 不 到 的 ， 使 用 格式 如 下 : 

<meta name="keywords" content=" 关 键 词 , keywords" /> 

(1) 不 同 的 关键 词 之 间 应 使 用 半角 各 号 隔 开 (英文 输入 状态 下 )， 不 要 使 用 
“空格 ”或 “|” 间 隔 。 

(2) 是 keywords， 不 是 keyword。 

(3) 关键 词 标 签 中 的 内 容 应 该 是 一 个 个 短语 ， 而 不 是 一 段 话 。 
例如 ， 定 义 针对 搜索 引擎 的 关键 词 ， 代 码 如 下 : 


<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" /> 


关键 词 标签 keywords， 曾 经 是 搜索 引擎 排名 中 很 重要 的 因素 ， 但 现在 已 经 被 很 多 搜索 引 
擎 完全 忽略 。 如 果 我 们 加 上 这 个 标签 ， 对 网 页 的 综合 表现 没有 坏处 。 不 过 ， 如 果 使 用 不 恰当 
的 话 ， 对 网 页 非但 没有 好 处 ， 还 有 欺诈 的 嫌疑 。 在 使 用 关键 词 标签 keywords 时 ， 要 注意 以 下 
几 点 。 

(1) 关键 词 标签 中 的 内 容 要 与 网 页 核心 内 容 相关 ， 应 当 确信 使 用 的 关键 词 出 现在 网 页 文 
本 中 。 

D 应 当 使 用 用 户 易于 通过 搜索 引擎 检索 的 关键 词 ， 过 于 生 俱 的 词汇 不 太 适 合作 为 meta 





JWI 
V 
a 


sal 


BREMSAESIWLH ew A 





My 





fey HTML 5 网 页 设计 
案例 课堂 第 2 版) D- 





标签 中 的 关键 词 。 
(3) 不 要 重复 使 用 关键 词 ， 否 则 可 能 会 被 搜索 引擎 惩罚 。 
(4) 一 个 网 页 的 关键 词 标签 里 最 多 包含 3 一 5 个 最 重要 的 关键 词 ， 不 要 超过 5 个 。 
(5) 每 个 网 页 的 关键 词 应 该 不 一 样 。 
Q j 由 于 设计 者 或 SEO 优化 者 以 前 对 meta keywords 关键 词 的 混用， 导致 目前 它 在 
i 搜索 引擎 排名 中 的 作用 很 小 。 


3) ”页 面 描述 

meta description 元 标签 (描述 元 标签 ) 是 一 种 HTML 元 标签 ， 用 来 简略 描述 网 页 的 主要 内 
容 ， 通 常 是 被 搜索 引擎 用 在 搜索 结果 页 上 展示 给 最 终 用 户 看 的 一 段 文字 。 页 面 描述 在 网 页 中 
并 不 显示 出 来 。 页 面 描述 的 使 用 格式 如 下 : 


<meta name="description" content=" 网 页 的 介绍 " /> 


例如 ， 定 义 对 页 面 的 描述 ， 代 码 如 下 : 
<meta name="description" content=" 免 费 的 Web 技术 教程 。" /> 
4) 页 面 定 时 跳 转 
使 用 <meta> 标 记 可 以 使 网 页 在 经 过 一 定时 间 后 自动 刷新 ， 这 可 以 通过 将 http-equiv 属性 值 
设置 为 refresh 来 实现 。content 属性 值 可 以 设置 为 更 新 时 间 。 
在 浏览 网 页 时 经 常会 看 到 一 些 欢迎 信息 的 页 面 ， 在 经 过 一 段 时 间 后 ， 这 些 页 面 会 自动 转 
到 其 他 页 面 ， 这 就 是 网 页 的 跳 转 。 页 面 定 时 刷新 跳 转 的 语法 格式 如 下 : 
<meta http-equiv="refresh" content=" 秒 ; [ur1l= 网 址 ]" /> 
Sam 上 面 的 [url= 网 址 ] 部 分 是 可 选项 ， 如 果 有 这 部 分 ， 页 面 定时 刷新 并 跳 转 ; 如 果 
SN 省 略 该 部 分 ， 页 面 只 定时 刷新 ， 不 进行 跳 转 。 
例如 ， 实 现 每 S 秒 刷 新 一 次 页 面 。 将 下 述 代 码 放 入 head 标记 中 即 可 : 


<meta http-equiv="refresh" content="5" /> 


2.2.4 网 页 的 主体 标记 body 


网 页 所 要 显示 的 内 容 都 放 在 网 页 的 主体 标记 内 ， 它 是 HTML 文件 的 重点 所 在 。 后 面 章节 
所 介绍 的 HTML 标记 都 将 放 在 这 个 标记 内 。 然 而 ， 它 并 不 仅仅 是 一 个 形式 上 的 标记 ， 它 本 身 
也 可 以 控制 网 页 的 背景 颜色 或 背景 图 像 ， 这 将 在 后 面 进行 介绍 。 主 体 标 记 是 以 <body> 开 始 、 
以 </body> 标 记 结束 的 ， 语 法 格式 如 下 : 


<body> 
PPS 

~? 

ji ik 在 构建 HTML 结构 时 ， 标 记 不 允许 交错 出 现 ， 否 则 会 造成 错误 。 
意 


在 下 列 代码 中 ，<body> 开 始 标记 出 现在 <head> 标 记 内 ， 这 是 错误 的 : 


<html> 

<head> 
<title> 标 记 测试 </title> 
<body> 

</head> 

</body> 

</html> 


2.2.5 ”页 面 注释 标记 <!-- --> 


注释 是 在 HTML 代码 中 插入 的 描述 性 文本 ， 用 来 解释 该 代码 或 提示 其 他 信息 。 注 释 只 出 
现在 代码 中 ， 浏 览 器 对 注释 代码 不 进行 解释 ， 并 且 在 浏览 器 的 页 面 中 不 显示 。 在 HTML 源 代 
码 中 适当 地 插入 注释 语句 是 一 种 非常 好 的 习惯 ， 这 对 于 设计 者 日 后 的 代码 修改 、 维 护 工作 很 
有 好 处 。 另 外 ， 如 果 将 代码 交 给 其 他 设计 者 ， 其 他 人 也 能 很 快 读 懂 前 者 所 撰写 的 内 容 。 

语法 格式 如 下 : 

<! 一 -注释 的 内 容 --> 


注释 语句 元 素 由 前 后 两 半 部 分 组 成 ， 前 半 部 分 由 一 个 左 尖 括号 、 一 个 半角 感叹 号 和 两 个 
连 字 符 组 成 ， 后 半 部 分 由 两 个 连 字符 和 一 个 右 尖 括 号 组 成 : 


<html> 
<head> 
<title> 标 记 测试 </title> 
</head> 
<body> 
<!-- 这 里 是 标题 --> 
<h1>HTML 5 网 页 设计 </h1> 
</body> 
</html> 


页 面 注 释 不 但 可 以 对 HTML 中 一 行 或 多 行 代码 进行 解释 说 明 ， 而 且 可 以 注释 掉 这 些 代 
码 。 如 果 希 望 某 些 HTML 代码 在 浏览 器 中 不 显示 ， 可 以 将 这 部 分 内 容 放 在 <!-- 和 --> 之 间 。 例 
修改 上 述 代 码 : 


<html> 

<head> 
<title> 标 记 测试 </title> 

</head> 

<body> 
<= 
<h1>HTML 5 网 页 </h1> 
Sa 

</body> 

</html> 


修改 后 的 代码 将 <h1> 标 记 作为 注释 内 容 处 理 ， 在 浏览 器 中 将 不 会 显示 这 部 分 内 容 。 
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2.3 HTML 5 语法 的 变化 
为 了 兼容 各 个 不 统一 的 页 面 代码 ，HTML 5 的 设计 在 语法 方面 做 了 以 下 变化 。 


2.3.1 标签 不 再 区 分 大 小 写 
标签 不 再 区 分 大 小 写 是 HTML 5 语法 变化 的 重要 体现 。 示 例 代码 如 下 


<!DOCTYPE html> 
<html> - O0 x 
<head> 2) DONEREN O ~ OC) BANS RE 
<title> 大 小 写 标签 </title> 文件 (有 RE) BEV) GERA TAD WIH 


</head> 
<body> 这 里 的 标签 大 小 写 不 一 样 
<P> 这 里 的 标签 大 小 写 不 一 样 </p> 
</body> 

</html> 


H IE 11.0 中 预览 ， 效 果 如 图 2-2 所 示 。 

虽然 “<P> 这 里 的 标签 大 小 写 不 一 样 <p>” 中 开始 oe 
标记 和 结束 标记 不 匹配 ， 但 是 这 完全 符合 HTML 5 的 规范 。 用 户 可 以 通过 W3C 提供 的 在 线 验 
证 页 面 来 测试 上 面 的 网 页 ， 验 证 网 址 为 http://validator.w3.org/。 


2.3.2 ”人 允许 属性 值 不 使 用 引号 
在 HTML 5 中 ,属性 值 不 放 在 引号 中 也 是 正确 的 。 例 如 以 下 代码 片段 : 


<input checked="a" type="checkbox"/> 
<input readonly type="text"/> 
<input disabled="a" type="text"/> 


上 述 代 码 片 段 与 下 面 的 代码 片段 效果 是 一 样 的 : 


<input checked=a type=checkbox/> 
<input readonly type=text/> 
<input disabled=a type=text/> 


Se 尽管 HTML 5 允许 属性 值 可 以 不 使 用 引号 ， 但 是 仍然 建议 读者 加 上 引号 。 因 
Qo 为 如 果 某 个 属性 的 属性 值 中 包含 空格 等 容易 引起 混淆 的 属性 值 ， 此 时 可 能 会 引起 
浏览 器 的 误解 。 例 如 以 下 代码 : 
<img src=mm ch02/01.jpg /> 
此 时 浏览 器 就 会 误 以 为 src 属性 的 值 就 是 mm， 这 样 就 无 法 解析 路 径 中 的 
01.jpg 图 片 。 如 果 想 正确 解析 到 图 片 的 位 置 ， 必 须 添加 上 引号 。 


2.3.3 ”允许 部 分 属性 值 的 属性 省 略 
在 HTML 5 中 ， 部 分 标志 性 属性 的 属性 值 可 以 省 略 。 例 如 ， 以 下 代码 是 完全 符合 HIML 5 











x 


规则 的 : 


<input checked type="checkbox"/> 
<input readonly type="text"/> 


其 中 checked="checked"@ 8A checked, if readonly="readonly" 省 略为 readonly。 
在 HTML 5 中 ， 可 以 省 略 属性 值 的 属性 如 表 2-2 所 示 。 


表 2-2 可 以 省 略 属性 值 的 属性 





BOM SS WH mz ia 














属 性 省 略 属 性 值 
checked 省 略 属 性 值 后 ， 等 价 于 checked="checked" 
Teadonly 省 略 属性 值 后 ， 等 价 于 readonly="readonly" 
defer 省 略 属性 值 后 ， 等 价 于 defer="defer" 
ismap 省 略 属性 值 后 ， 等 价 于 ismap="ismap" 
nohref 省 略 属性 值 后 ， 等 价 于 nohref="nohref" 
noshade 省 略 属性 值 后 ， 等 价 于 noshade="noshade" SS 
nowrap 省 略 属 性 值 后 ， 等 价 于 nowrap="nowrap" 
selected 省 略 属性 值 后 ， 等 价 于 selected="selected" 
disabled 省 略 属性 值 后 ， 等 价 于 disabled="disabled" 
mnultiple 省 略 属性 值 后 ， 等 价 于 multiple="multiple" 
noresize 省 略 属性 值 后 ， 等 价 于 noresize="noresize" 





HTML 5 代码 规范 


很 多 学 习 网 页 设计 的 人 员 ， 对 于 HTML 的 代码 规范 知之 甚 少 。 作 为 一 名 优秀 的 网 页 设计 
人 员 ， 很 有 必要 学 习 比 较 好 的 代码 规范 。HTML 5 代码 规范 介绍 如 下 。 

1. 使 用 小 写 标记 名 

在 HIML 5 中 ， 元 素 名 称 可 以 大 写 也 可 以 小 写 ， 推 荐 使 用 小 写 元 素 名 。 主 要 原因 如 下 。 

(1) 混合 使 用 大 小 写 元 素 名 的 代码 是 非常 不 规范 的 。 

(2) 小 写字 母 容易 编写 。 

(3) 小 写字 母 让 代码 看 起 来 整齐 而 清爽 。 

(4) 网 页 开发 人 员 往 往 使 用 小 写 ， 这 样 便于 统一 规范 。 

2. 标记 要 成 对 出 现 

在 HIML 5 F, 一般 标 记 都 是 成 对 出 现 的 。 除 非 是 空 的 HTML 标记 。 例 如 

<meta charset="utf-8"> 

也 可 以 这 么 写 : 


<meta charset="utf-8" /> 


2.4” 必 知 必 会 
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25 综合 案例 一 一 符合 W3C 标准 的 HTML 5 网 页 


通过 本 章 的 学 习 ， 读 者 了 解 到 HTML 5 较 以 前 版 本 有 了 很 大 改变 。 本 章 就 标记 语法 部 分 
进行 了 详细 的 阐述 。 

下 面 将 制作 一 个 符合 W3C 标准 的 HTML 5 网 页 ， 具 体操 作 步 又 如 下 。 

EGP 启动 Dreamweaver CC， 新 建 HTML 文档 ， 并 单 击 文档 工具 栏 中 的 “代码 ” 按 
钮 ， 切 换 至 代码 状态 ， 如 图 2-3 所 示 。 

图 2-3 中 的 代码 是 XHTML 1.0 格式 的 ， 尽 管 与 HIML 5 完全 兼容 ， 但 是 为 了 简 
化 代码 ， 可 以 将 其 修改 成 HTML 5 规范 的 。 修 改 文档 说 明 部 分 、<html> 标 记 部 分 和 
<meta> 元 信息 部 分 。 修 改 后 ，HITML 5 结构 的 代码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8" /> 
<title>HTML 5 网 页 设计 </title> 
</head> 


<body> 
</body> 
</html> 


在 网 页 主体 中 添加 内 容 。 例 如 ， 在 body 部 分 增加 如 下 代码 : 


<!-- 白 居 易 诗 --> 
<h1> 续 座右铭 </h1> 
<P> 
千里 始 足 下 , <br> 
Pee. <br> 
寿 道 亦 如 此 , <br> 
行 之 贵 日 新 。<br> 


</P> 


GOULD 保存 网 页 ， 在 IE 11.0 中 预览 ， 效 果 如 图 2-4 所 示 。 


=a x 
PE T E 
28) sap REM serw IEM abm 


续 座 右 铭 


咎 里 始 是 下 
高 山 起 微 生 
香道 亦 如 此 ， 
FARES. a 








图 2-3 {FA Dreamweaver CC #732 HTML 文档 图 2-4 ”网 页 的 预览 效果 





2.6” 跟 我 学 上 机 一 一 简单 的 HTML 5 网 页 


下 面 制作 一 个 简单 的 HTML 5 网 页 ， 具 体操 作 步 又 如 下 。 


CEU 打开 记事 本 文件 ， 在 其 中 输入 下 述 代码 : 


<!DOCTYPE html> 
<html> 
<head> 
<title>fi Ay HTML 5 网 页 </title> 
</head> 
<body> 
<h1> 清 明 </h1> 
<P> 
清明 时 节 雨 纷纷 , <br> 
BEITAR. <br> 
借 问 酒家 何 处 有 , <br> 
牧童 遥 指 桂花 村 。<br> 
</P> 
<img src="qingming.jpg"> 
</body> 
</html> 


EEI 保存 网 页 ， 在 下 11.0 中 预览 ， 效 果 如 图 2.5 


所 示 。 


27 SFR 


疑问 1: 在 网 页 中 ， 语 言 的 编码 方式 有 哪些 ? 


答 : 在 HTML 5 网 页 中 ，<meta> 标 记 的 charset 属性 用 于 设置 网 页 的 内 码 语系 ， 也 就 是 字 
符 集 的 类 型 。 对 于 国内 ， 经 常 要 显示 汉字 ， 通 常设 置 为 GB2312( 简 体 中 文 ) 和 UTF-8 两 种 。 英 








请 明 时 节 南 纷 维 。 
BEAR. 
二 问 灌 家 何 处 有 
黎 剖 运 指 青花 村 。 











2-5 网 页 的 预览 效果 


文 是 ISO-8859-1 字符 集 。 此 外 还 有 其 他 字符 集 ， 这 里 不 再 介绍 。 


疑问 2: 网 页 中 的 基本 标签 是 否 必须 成 对 出 现 ? 
答 : 在 HTML 5 网 页 中 ， 大 部 分 标签 都 是 成 对 出 现 的 。 不 过 也 有 部 分 标签 可 以 单独 出 


现 ，<p 人 >、<br>、<img/>、<hr/> 等 。 
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第 3 章 
HTML 5 5 HTML 4 
的 区 别 


HTML 5 中 新 增 了 大 量 元 素 与 属性 。 这 些 新 增 的 元 素 和 属性 使 HIML 5 的 功能 
变 得 更 加 强大 ， 使 网 页 设计 效果 有 了 更 多 的 实现 可 能 。 


重点 案例 效果 


优秀 开发 人 员 的 素质 


-个 优秀 的 Web 页 面 开发 人 员 ， 必 须 具 有 过 硬 的 技 
术 与 务实 的 专业 精神 
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3.1 新 增 的 主体 结构 元 素 


在 HTML 5 中 ， 新 增 了 几 种 新 的 与 结构 相关 的 元 素 ， 分 别 是 section 元 素 、article 元 素 、 
aside 元 素 、nav 元 素 和 time 元 素 。 


3.1.1 案例 1 一 一 section 元 素 的 使 用 


NN <section> 标 签 定 义 文档 中 的 节 ， 如 章节 、 页 眉 、 页 脚 或 文档 中 的 其 他 部 分 。 它 可 以 与 
hl, h2, h3, h4, h5, h6 等 元 素 结合 起 来 使 用 ， 标 示 文 档 结构 。 
section 标签 的 代码 结构 如 下 : 


<section> 
<h1>...</h1> 
<p>..</p> 
</section> 


【 例 3.1) section 元 素 的 使 用 (案例 文件 : ch03\3.1.html). 


<!DOCTYPE HTML> 
<html> 
<body> 
<section> 
<h2>section 元 素 使 用 方法 </h2> 
<p> section 元 素 用 于 对 网 站 或 应 用 程序 中 页 面 上 的 内 容 进 行 分 块 。</p> 





</section> 

</body> 

</html> 

在 正 11.0 中 预览 ， 效 果 如 图 3-1 所 示 ， 实 现 了 内 容 的 分 块 显示 。 

口 X 

| E) DA 漂 代 友 \ch03\3.1ht O ”| E px 源 代码 ho3\3.1h. x 
| set RAO SEV wa) IAM SDH 
section 元 素 使 用 方法 
section 元 素 用 于 对 网 站 或 应 用 程序 中 页 面 上 的 内 容 
进行 分 块 。 





图 3-1 section 元 素 的 使 用 


3.1.2 ”案例 2 一 一 article 元 素 的 使 用 


<article> 标 签 定义 外 部 的 内 容 。 外 部 内 容 可 以 是 来 自 一 个 外 部 的 新 闻 提 供 者 的 一 篇 新 的 文 
章 ， 或 者 来 自 blog 的 文本 ， 或 者 是 来 自 论坛 的 文本 ， 或 者 是 来 自 其 他 外 部 源 内 容 。 
article 标签 的 代码 结构 如 下 : 


<article> 
erties 
【 例 3.2) article 元 素 的 使 用 (案例 文件 : ch03\3.2.html). 


<!DOCTYPE HTML> 
<html> 
<body> 
<article> 
<header> 
<hl> HTML 5 教程 </h1> 
<p> 时 间 : <time pubdate="pubdate">2017-12-1</time></p> 
</header> 
<p> 轻 松 学 习 HTML 5 教程 ， 就 来 </p> 
<a href="http://www.yingda.com">www.yingda.com</a><br /> 
<footer> 
<p><smal1> 底 部 版 权 信息 : yingda.com 公司 所 有 </small></p> 
</footer> 
</article> 
</body> 
</html> 


ETE 11.0 中 预览 ， 效 果 如 图 3-2 所 示 ， 实 现 了 外 部 内 容 的 定义 。 
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HTML 5 教程 
时 间 : 2017-12-1 
轻松 学 习 HTML 5 教程 ， 就 来 








www. yingda. com 





底部 版 权 信息 : yingda. com 公 司 所 有 





3-2 article 元 素 的 使 用 


该 实例 讲述 article 元 素 的 使 用 方法 ， 在 header 元 素 中 嵌入 了 文章 的 标题 部 分 ， 在 标题 下 
部 的 p 元 素 中 ， 嵌 入 了 一 大 段 正 文 内 容 ; 在 结尾 处 的 footer 元 素 中 ， 嵌 入 了 文章 的 著作 权 ， 
作为 脚注 。 整 个 示例 的 内 容 相 对 比较 独立 、 完 整 ， 是 因为 这 部 分 内 容 使 用 了 article 元 素 。 


1. article 元 素 与 section 元 素 的 区 别 


下 面 我 们 来 介绍 一 下 article 元 素 与 section 元 素 的 区 别 。 
【 例 3.3) article 元 素 与 section 元 素 的 区 别 (案例 文件 : ch03\3.3.html)。 


<!DOCTYPE HTML> 
<html> 
<body> 
<article> 
<hl>article 元 素 与 section 元 素 的 使 用 方法 </h1> 
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<p> 何 时 使 用 article mR? 何 时 使 用 section 元 素 …. .</p> 
<section> 
<h2>article 元 素 使 用 方法 </h2> 
<p>article 元 素 代表 文档 、 页 面 或 应 用 程序 中 独立 的 、 完 整 的 、 可 以 独自 被 外 部 引用 
的 内 容 。</p> 
</section> 
<section> 
<h2>section 元 素 使 用 方法 </h2> 
<p> section 元 素 用 于 对 网 站 或 应 用 程序 中 页 面 上 的 内 容 进行 分 块 。</p> 
</section> 
</article> 
</body> 
</html> 


在 下 11.0 中 预览 ,效果 如 图 3-3 所 示 ， 可 以 清楚 地 看 到 这 两 个 元 素 的 使 用 区 别 。 
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article 元 素 与 section 元 素 的 使 用 方法 
何 时 使 用 article 元 素 ? 何 时 使 用 section 元 素 …, ， 
article 元 素 使 用 方法 


article 元 素 代 表 文档 、 页 面 或 应 用 程序 中 独立 的 、 完 整 的 、 可 以 独自 被 
外 部 引用 的 内 容 。 


section 元 素 使 用 方法 


section 元 素 用 于 对 网 站 或 应 用 程序 中 页 面 上 的 内 容 进 行 分 块 。 








图 3-3 article 元 素 与 section 元 素 的 区 别 
2. article THHRE 


article 元 素 是 可 以 嵌 套 使 用 的 ， 内 层 的 内 容 在 原则 上 需要 与 外 层 的 内 容 相 关联 。 例 如 ， 一 
篇 博客 文章 中 ， 针 对 该 文章 的 评论 就 可 以 使 用 嵌 套 article 元 素 的 方式 ， 用 来 呈现 评论 的 article 
元 素 被 包含 在 表示 整体 内 容 的 article 元 素 里 面 。 

【 例 3.4) article 元 素 的 嵌 套 (案例 文件 :ch03\3.4.html)。 


<!DOCTYPE HTML> 
<html> 
<body> 
<article> 
<header> 
<hl>article 元 素 的 嵌 套 </h1> 
<p> 发 表 日 期 : <time pubdate="pubdate">2017/10/10</time></p> 
</header> 
<p>article 元 素 是 什么 ? 怎样 使 用 article 元 素 ? …</p> 
<section> 
<h2> 评 论 </h2> 
<article> 
<header> 
<h3> 发 表 者 : 唯一 </h3> 
<p><time pubdate datetime="2011-12-23T:21-26:00">1 小 时 


前 </time></p> 
</header> 
<p> 这 篇 文章 很 不 错 啊 ， 顶 一 下 ! </p> 
</article> 
<article> 
<header> 
<h3> 发 表 者 : 唯一 </h3> 
<p><time pubdate datetime="2013-2-20 T:21-26:00">1 小 时 
前 </time></p> 
</header> 
<p> 这 篇 文章 很 不 错 啊 </p> 
</article> 
</section> 
</article> 
</body> 
</html> 


在 正 11.0 中 预览 ,效果 如 图 3-4 所 示 。 
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RAM: 2017/10/10 

article 元 素 是 什么 ? 怎样 使 用 article 元 素 ? = 
评论 

发 表 者 : Me 

1 小 时 前 

这 篇 文章 很 不 铺 币 ， 项 一 下 !1 

发 表 者 : 唯一 

1 小 时 前 

RLM 








图 3-4 article THHRE 


这 个 实例 中 的 代码 比较 完整 ， 它 添加 了 读者 对 文章 的 评论 内 容 ， 实 例 内 容 分 为 几 个 部 
分 。 文 章 标题 放 在 了 header 元 素 中 ， 文 章 正文 放 在 了 header 元 素 后 面 的 p 元 素 中 ， 然 后 
section 元 素 把 正文 与 评论 进行 了 区 分 (是 一 个 分 块 元 素 ， 用 来 把 页 面 中 的 内 容 进 行 区 分 )。 在 
section 元 素 中 嵌入 了 评论 的 内 容 ， 评 论 中 每 一 个 人 的 评论 相对 来 说 又 是 比较 独立 的 、 完 整 
的 。 因 此 ， 对 它们 都 使 用 一 个 article 元 素 。 在 评论 的 article 元 素 中 ， 又 可 以 分 为 标题 与 评论 
内 容 部 分 ， 分 别 放 在 header 元 素 与 p 元 素 中 。 


3.1.3 ”案例 3 一 一 aside 元 素 的 使 用 


aside 元 素 一 般 用 来 表示 网 站 当前 页 面 或 文章 的 附属 信息 部 分 ， 它 可 以 包含 与 当前 页 面 或 
主要 内 容 相关 的 广告 、 导 航 条 、 引 用 、 侧 边栏 评论 部 分 ， 以 及 其 他 区 别 于 主要 内 容 的 部 分 。 

aside 元 素 主要 有 以 下 两 种 使 用 方法 。 

(1) RAGE article 元 素 中 作为 主要 内 容 的 附属 信息 部 分 ， 其 中 的 内 容 可 以 是 与 当前 文 
章 有 关 的 相关 资料 、 名 称 解释 等 。 
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aside 标签 的 代码 结构 如 下 : 


<article> 
<h1>..</h1> 
<p>...</p> 
<aside>..</aside> 

</article> 


(2) 在 article 元 素 之 外 使 用 作为 页 面 或 站 点 全 局 的 附属 信息 部 分 。 最 典型 的 是 侧 边栏 ， 


其 中 的 内 容 可 以 是 友情 链接 、 博 客 中 的 其 他 文章 列表 、 广 告 单元 等 。 


aside 标签 的 代码 结构 如 下 : 


<aside> 
<h2>..</h2> 
<ul> 
<li>...</li> 
<li>...</li> 
</ul> 
<h2>..</h2> 
<ul> 
<li>...</li> 
<li>...</li> 
</ul> 
</aside> 


【 例 3.5] aside 元 素 的 使 用 (案例 文件 : ch03\3.5.html). 


<!DOCTYPE html> 
<html> 
<head> 
<title> 标 题 文件 </title> 
<link rel="stylesheet" href="mystyles.css"> 
</head> 








<body> 
<header> 
<h1> 站 点 主 标题 </h1> 
</header> 
<nav> 
<ul> 
<1i> 主 页 </1i> | 司 bAaKEhoiashr 记 -| BEE 
<1i> 图 片 </1i> 2h SRO SE Cesa) IAN MMH) 
<1i> 音 频 </1i> 
r3 mck 
站 点 主 标题 
<section> 
</section> 5 a 
<aside> 。 音频 
<blockquote> 文 章 1</blockquote> 
<blockquote> 文 章 2</blockquote> 文章 1 
</aside> 文章 2 
</body> 
</html> 


Æ JE 11.0 中 预览 ， 效 果 如 图 3-5 所 示 。 


3-5 aside 元 素 的 使 用 





Sn <aside> 元 素 可 以 位 于 示例 页 面 的 左边 或 右边 ， 这 个 标签 并 没有 预定 义 的 位 
A 。 置 。<aside> 元 素 仅仅 描述 所 包含 的 信息 ， 而 不 反映 结构 。<aside> 元 素 可 位 于 布局 
的 任意 部 分 ， 用 于 表示 任何 非 文 档 主 要 内 容 的 部 分 。 例 如 ， 可 以 在 <section> 元 素 


中 加 入 一 个 <aside> 元 素 ， 甚 至 可 以 把 该 元 素 加 入 一 些 重要 信息 中 ， 如 文字 引用 。 


3.1.4 ”案例 4 一 一 nav 元 素 的 使 用 


<nav> 用 来 将 具有 导航 性 质 的 链接 划分 在 一 起 ， 使 代码 结构 在 语义 化 方面 更 加 准确 ， 同 时 
对 于 屏幕 阅读 器 等 设备 的 支持 也 更 好 。 

具体 来 说 ，nav 元 素 可 以 用 于 以 下 这 些 场 合 。 

(1) 传统 导航 条 。 现 在 主流 网 站 上 都 有 不 同 层级 的 导航 条 ， 其 作用 是 将 当前 画面 跳 转 到 
网 站 的 其 他 主要 页 面 上 去 。 

(2) 侧 边栏 导航 。 现 在 主流 博客 网 站 及 商品 网 站 上 都 有 侧 边栏 导航 ， 其 作用 是 将 页 面 从 
当前 文章 或 当前 商品 跳 转 到 其 他 文章 或 其 他 商品 页 面 上 去 。 

(3) 页 内 导航 。 页 内 导航 的 作用 是 在 本 页 面 几 个 主要 的 组 成 部 分 之 间 进 行 跳 转 。 

(4) 翻 页 操作 。 翻 页 操作 是 指 在 多 个 页 面 的 前 后 页 或 博客 网 站 的 前 后 篇 文章 滚动 。 

(5) 除 此 之 外 ，nav 元 素 也 可 以 用 于 其 他 所 有 用 户 觉得 是 重要 的 、 基 本 的 导航 链接 组 中 。 

具体 实现 代码 如 下 : 


<nav> 

<a href="..">Home</a> 

<a href="..">Previous</a> 
<a href="..">Next</a> 
</nav> 


= 
Sika 





如 果 文档 中 有 “前 后 ”按钮 ， 则 应 该 把 它 放 到 <nav> 元 素 中 。 


一 个 页 面 中 可 以 拥有 多 个 <nav> 元 素 ， 作 为 页 面 整体 或 不 同 部 分 的 导航 。 下 面 给 出 一 个 代 
码 实例 。 
【 例 3.6】nav 元 素 的 使 用 (案例 文件 : ch03\3.6.html)。 


<!DOCTYPE html> 
<html> 
<body> 
<h1> 技 术 资 料 </h1> 
<nav> 
<ul> 
<li><a href="/"> 主 页 </a></1i> 
<li><a href="/events"> 开 发 文档 </a></1i> 
</ul> 
</nav> 
<article> 
<header> 
<hl>HTML 5 与 CSS 3 的 历史 </h1> 
<nav> 
<ul> 
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<li><a href="#HTML 5">HTML 5 的 历史 </a></1i> 
<li><a href="#CSS 3">css 3 的 历史 </a></1i> 
</ul> 
</nav> 
</header> 
<section id="HTML 5"> 
<h1>HTML 5 的 历史 </h1> 
<p> 讲 述 HTML 5 的 历史 的 正文 </p> 
<footer> 
<p> 
<a href="?edit"> 以 往 版 本 </a> | 
<a href="?delete"> 当 前 现状 </a> 
<a href="?rename"> 未 来 前 景 </a> 
</p> 
</footer> 
</section> 
<section id="CSS 3"> 
<hl>css 3 的 历史 </h1> 
<p> 讲 述 css 3 的 历史 的 正文 </p> 











</section> 3 E 
<footer> 技术 资料 
<p> : Hs 


<a href="?edit"> 以 往 版 本 </a> | 
<a href="?delete"> 当 前 现状 </a> 


HTML 5 与 CSS 3 的 历史 





<a href="?rename"> 未 来 前 景 </a> 村 一 
</p> HTWL 5 的 历史 
</footer> WENA 5 的 历史 的 正文 
</article> Diba | aiea | agit 
<footer> css 3 的 历史 
<p><small> 版 权 所 有 : 青花 瓷 </small></p> 讲 巡 CSs 3 的 历史 的 正文 
</footer> Diba | siimi | axie 
</body> mmt ME 


</html> 
在 IE 11.0 中 预览 ， 效 果 如 图 3-6 所 示 。 


aan 在 这 个 实例 中 ， 可 以 看 到 <nav> 不 仅 可 以 用 来 作为 页 面 全 局 导航 ， 也 可 以 放 
AL ”在 <article> 标 签 内 ， 作 为 单 篇 文章 内 容 的 相关 导航 链接 到 当前 页 面 的 其 他 位 置 。 


3-6 nav 元 素 的 使 用 


是 站 在 HTML 5 中 不 要 用 menu CHAKA nav AŽ, menu 元 素 是 用 在 一 系列 发 出 
le 。 命令 的 菜单 上 的 ， 是 一 种 交互 性 元 素 ， 或 者 更 确切 地 说 是 使 用 在 Wed 应 用 程序 
中 的 。 


3.1.5 “案例 5 一 一 time 元 素 的 使 用 


<time> 是 HIML 5 新 增加 的 一 个 标记 ， 用 于 定义 时 间或 日 期 。 该 元 素 可 以 代表 24 小 时 中 
的 某 一 时 刻 ， 在 表示 时 刻 时 ， 人 允许 有 时 间 差 。 在 设置 时 间或 日 期 时 ， 只 需要 将 该 元 素 的 属性 
datetime 设 为 相应 的 时 间或 日 期 即 可 。 

具体 实现 代码 如 下 : 


<p> 
<time> 


</time> 
</p> 
<p> 
<time datetime= 


</time> 
</p> 


【 例 3.7) time 元 素 的 使 用 (案例 文件 : ch03\3.7.htmD)。 


<!DOCTYPE html> 
<html> 
<body> 
<h1l>Time 元 素 </h1> 
<p id="pl"> 
<time datetime="2017-11-17"> 
今天 是 2017 年 11 月 17 日 
</time> 
<p> 
<p id="p2"> 
<time datetime="2017-11-17T17:00"> 
现在 时 间 是 2017 年 11 月 17 日 晚上 5 点 
</time> 
<p> 
<p id="p3"> 
<time datetime="2017-11-31"> 
新 款 冬装 将 于 今年 年 底 上 市 
</time> 
</p> 
<p id="p4"> 
<time datetime="2017-11-15" 
pubdate="true"> 
本 消息 发 布 于 2017 年 11 月 15 日 
</time> 
</p> 
</body> 
</html> 


WIE 11.0 中 预览 ， 效 果 如 图 3-7 所 示 。 
说 明 : 
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OO v 
O a 
Time 元 素 


今天 是 2017 年 11 月 17 日 

现在 时 间 是 2017 年 11 月 17 日 晚上 5 点 
新 款 冬装 将 于 今年 年 底 上 市 

本 消息 发 布 于 2017 年 11 月 15 日 





3-7 time 元 素 的 使 用 


e <p> 元 素 id 号 为 pl 中 的 <time> 元 素 表示 的 是 日 期 。 页 面 在 解析 时 ， 获 取 的 是 属性 
datetime 中 的 值 ， 而 标记 之 间 的 内 容 只 是 用 于 显示 在 页 面 中 。 

e <p> 元 素 id 号 为 p2 中 的 <time> 元 素 表示 的 是 日 期 和 时 间 ， 它 们 之 间 使 用 字母 T 进行 
分 隔 。 如 果 在 整个 日 期 与 时 间 的 后 面 加 上 一 个 字母 Z， 则 表示 获取 的 是 UTC( 世 界 统 


一 时 间 ) 格 式 。 


© ”<p> 元素 id 号 为 p3 中 的 <time> 元 素 表示 的 是 将 来 时 间 。 
e ”<p> 元素 id 号 为 p4 中 的 <time> 元 素 表 示 的 是 发 布 日 期 。 
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为 了 在 文档 中 将 这 两 个 日 期 进行 区 分 ， 在 最 后 一 个 <time> 元 素 中 增加 了 
pubdate 属性 ， 表 示 此 日 期 为 发 布 日 期 。 
= <time> 元 素 中 的 可 选 属性 pubdate 表示 时 间 是 否 为 发 布 日 期 ， 它 是 一 个 布尔 


可 


-提示 
\ 值 ， 该 属性 不 仅 可 以 用 于 <time> 元 素 ， 还 可 以 用 于 <article> 元 素 。 


2 
iE 
意 


= ) 


3.2 ”新 增 的 非 主体 结构 元 素 


N 在 HTML 5 中 还 新 增 了 一 些 非 主体 的 结构 元 素 ， 如 header, hgroup, footer 等。 


3.2.1 案例 6 一 一 header 元 素 的 使 用 


header 元 素 是 一 种 具有 引导 和 导航 作用 的 结构 元 素 ， 通 常用 来 放置 整个 页 面 或 页 面 内 的 
一 个 内 容 区 块 的 标题 ， 但 也 可 以 包含 其 他 内 容 ， 如 数据 表格 、 搜 索 表单 或 相关 的 logo 图 片 。 
header 标签 的 代码 结构 如 下 : 


<header> 
<h1>..</h1> 
<p>..</p> 
</header> 


在 整个 页 面 中 的 标题 一 般 放 在 页 面 的 开头 ， 一 个 网 页 中 没有 限制 header 元 素 的 个 数 ， 可 
以 拥有 多 个 ， 可 以 为 每 个 内 容 区 块 加 一 个 header 元 素 。 

【 例 3.8】header 元 素 的 使 用 (案例 文件 ，ch03\3.8.html)。 

<!DOCTYPE html> ce 

<html> { 


司 DARREAHORB Eht O = © | E DAREN hO NI ah * | 
<body> ARA RRO ESV TERN IAT) WMH 
<header> 


<h1> 网 页 标题 </h1> 一 
</header> 网 页 标题 
<article> 

<header> awe J 

<h1> 文 章 标题 </h1> 文 章 标题 
</header> 

<p> 文 章 正文 </p> 文章 正文 
</article> 
</body> 


二 3-8 header 元 素 的 使 用 
在 正 11.0 中 预览 ， 效 果 如 图 3-8 所 示 。 


or 在 HIML 5 中 ,一 个 header 元 素 通常 包括 至 少 一 个 headering 元 素 (h1 一 h6)， 
A 也 可 以 包括 hgroup 元 素 、nav 元 素 ， 还 可 以 包括 其 他 元 素 。 








3.2.2 ”案例 7 一 一 hgroup 元 素 的 使 用 
<hgroup> 标 签 用 于 对 网 页 或 区 段 (section) 的 标题 进行 组 合 。hgroup 元 素 通常 会 将 hl 一 h6 


第 

元 素 进行 分 组 ， 壁 如 一 个 内 容 区 块 的 标题 及 其 子 标题 算 一 组 。 S 
hgroup 标签 的 使 用 代码 如 下 : T 
<hgroup> 2 
<h1>...</h1> oh 
<h2>...t</h2> 5 
</hgroup> x 
通常 ， 如 果 文 章 只 有 一 个 主 标题 ， 是 不 需要 hgroup 元 素 的 。 如 下 这 个 实例 就 不 需要 使 用 = 
hgroup 元 素 。 的 
【 例 3.9】 不 使 用 hgroup 元 素 (案例 文件 ，ch033.9.html)。 p 


<!DOCTYPE html> 
<html> 
<body> 
<article> 
<header> 
<h1> 文 章 标题 </h1> 
<p><time datetime="2017-10-20">2017 年 10 月 20 日 </time></p> 
</header> 
<p> 文 章 正文 </p> 
</article> 
</body> 
</html> 


在 正 11.0 中 预览 ， 效 果 如 图 3-9 所 示 。 





一 o x 
E) DAME \chos\3.a.ht O ~ © | E DARHH\chO3\3.9h... X 
文件 (有 SRE EEV 收藏 夫 (A) IAT) BAH) 


文章 标题 


2017 年 10 月 20 日 
文章 正文 














图 3-9 只 有 一 个 主 标题 


但 是 ， 如 果 文 章 有 主 标题 ， 主 标题 下 有 子 标题 ， 就 需要 使 用 hgroup 元 素 了 。 如 下 这 个 实 
例 就 需要 使 用 hgroup 元 素 。 
【 例 3.10] hgroup 元 素 的 使 用 (案例 文件 :ch03\3.10.html)。 


<!DOCTYPE html> 
<html> 
<body> 
<article> 
<header> 
<hgroup> 
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<h1> 文 章 主 标题 </h1> 
<h2> 文 章 子 标题 </h2> 
</hgroup> 
<p><time datetime="2017-10-20">2017 年 10 月 20 日 </time></p> 
</header> 
<p> 文 章 正文 </p> 
</article> 
</body> 
</html> 


在 正 11.0 中 预览 ， 效 果 如 图 3-10 所 示 。 








- ao x 
O E) DARE \ch03\3.10t O ~ È | @ DAIRE ch03\3.10.... X ð 
ZAA SSO EV GERA) IAT WDH 


文章 主 标题 
文章 子 标题 
2017 年 10 月 20 日 

文章 正文 














A310 主 标题 下 有 子 标题 
3.2.3 ”案例 8 一 一 footer 元 素 的 使 用 


footer 元 素 可 以 作为 其 上 层 父 级 内 容 区 块 或 是 一 个 根 区 块 的 脚注 。footer 通常 包括 其 相关 
区 块 的 脚注 信息 ， 如 作者 、 相 关 阅 读 链接 及 版 权 信息 等 。 
使 用 footer 标签 设置 文档 页 脚 的 代码 如 下 : 


<footer>...</footer> 


在 HTML 5 出 现 之 前 ， 网 页 设计 人 员 使 用 下 面 的 方式 编写 页 脚 。 
【 例 3.11) ul 元 素 的 使 用 (案例 文件 :ch03\3.11.html)。 


<!DOCTYPE html> 








<html> 
<body> 
<div id="footer"> = A xX 
<ul> E) DAREA HON. O ~ 0 || @ DONE\chos\3.11... «|_| 
<1i> 版 权 信 息 </1i> RHA RED SEM SERA IAM #AH 
<1i> 站 点 地 图 </1i> 
<1i> 联 系 方式 </1i> ， 版 权 信息 
。， 站 点 地 图 
</ul> y 
<div> 。 联系 方式 
</body> 
</html> 


Æ JE 11.0 中 预览 ， 效 果 如 图 3-11 所 示 。 





图 3-11 ul 元 素 的 使 用 





但 是 到 了 HTML 5 之 后 ， 这 种 方式 将 不 再 使 用 ， 而 是 使 用 更 加 语义 化 的 footer 元 素来 蔡 代 。 
【 例 3.12] footer 元 素 的 使 用 (案例 文件 : ch03\3.12.html)。 


<!DOCTYPE html> 
<html> 





SMS p IWLH TSTANLH Wew & 





z o x 
<body> | EI OARRA O ~ 0 | S oaos...» | | 
<footer> | ae) SEO SEV vex) IAM 帮助 (H) 

<ul> 
<1i> 版 权 信息 </1i> ”版 权 信息 
<1i> 站 点 地 图 </1i> ， 站 点 地 图 
<1i> 联 系 方式 </1i> 。 联 系 方式 
</ul> 
</footer> 
z > 
ee 3-12 footer 元 素 的 使 用 


在 正 11.0 中 预览 ， 效 果 如 图 3-12 所 示 。 

et 与 header 元 素 一 样 ， 一 个 页 面 中 并 不 限制 footer 元 素 的 个 数 。 同 时 ， 可 以 为 
AL article 元 素 或 section 元 素 添 加 footer 元 素 。 
【 例 3.13】 添 加 多 个 footer 元 素 (案例 文件 : chO3\3.13.html). 


<!DOCTYPE html> 

















<html> 
<body> 
<article> 
文章 内 容 
<footer> 
文章 的 脚注 - o x 
A E) DAREA ch03\3.134 O ~ © || @ DARRERA cho3\3.13... x | 
</article> ZAA RAO EEV) SERA) IAM HAH 
<section> 文章 内 容 
“ladies 文章 的 脚注 
<footer> 分 段 内 容 
TARERE 分 段 内 容 的 脚注 
ooter> 
</section> 
</body> 
</html> 


图 3-13 添加 多 个 footer 元 素 
Æ IE 11.0 中 预览 ， 效 果 如 图 3-13 所 示 。 


3.2.4 案例 9 一 一 figure 元 素 的 使 用 


figure 元 素 是 一 种 元 素 的 组 合 ， 可 以 带 有 标题 (可 选 )。figure 标签 用 来 表示 网 页 上 一 块 独 
立 的 内 容 ， 将 其 从 网 页 上 移 除 后 不 会 对 网 页 上 的 其 他 内 容 产 生 影 响 。figure 所 表示 的 内 容 可 以 
是 图 片 、 统 计 图 或 代码 示例 。 

figure 标签 的 实现 代码 如 下 : 

<figure> 

<hl>...</h1> 


<p>..</p> 
</figure> 
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g 3 使 用 figure 元 素 时 ， 需 要 figcaption AA figure 元 素 组 添加 标题 。 不 过 , 一 
i 加 个 figure 元 素 内 最 多 只 允许 放置 一 个 figcaption 元 素 ， 其 他 元 素 可 无 限 放置 。 


1. 不 带 有 标题 的 figure 元 素 的 使 用 
【 例 3.14) 不 带 有 标题 的 figure 元 素 的 使 用 (案例 文件 ，ch03\3.14.html)。 


<!DOCTYPE HTML> 
<html> 
<head> 
<title> 不 带 有 标题 的 figure 元 素 </title> 
</head> 
<body> 
<figure> 
<img alt="images/logo.jpg"/> 
</figure> 
</body> 
</html> 


HIE 11.0 中 预览 ， 效 果 如 图 3-14 所 示 。 





- D0 x 
E ONERE chON3.14 O ~ C | O 不 而 有 标 是 99fgure 元 .x 
xe RHE) BEY wa TAN we) 





images/logo. jpg 





图 3-14 不 带 有 标题 的 figure 元 素 的 使 用 
2. 带 有 标题 的 figure 元 素 的 使 用 
【 例 3.15】 带 有 标题 的 figure 元 素 的 使 用 (案例 文件 :ch03\3.15.html)。 


<!DOCTYPE HTML> 





<html> 
<head> 
<title> 带 有 标题 的 figure 元 素 </title> Sk 
</head> @ EARNS A - C | Bneiourez «|| 
<body> Er 
<figure> 
<img alt="images/logo.jpg"/> ie 
</figure> m 
<figcaption> 标 题 提示 </figcaption> 标题 提示 
</body> 
<S/ntmiz 3-15” 带 有 标题 的 figure 元 素 的 使 用 


在 正 11.0 中 预览 ， 效 果 如 图 3-15 所 示 。 
3. 多 张 图 片 、 同 一 标题 的 figure 元 素 的 使 用 
【 例 3.16】 多 张 图 片 、 同 一 标题 的 figure 元 素 的 使 用 (案例 文件 : ch03\3.16.html)。 





<!DOCTYPE HTML> 
<html> 
<head> 
<title> 多 张 图 片 ， 同 一 标题 的 figure TK - 0 x 
</title> @ E) DABAE\ch03\3.161 O -~ È | 居多 图片, 同 - 村 是。 X 
</head> ZAA SEO SEV SERA IAT WRH 
<body> 
<figure> 
<img alt="images/logo.jpg"/> 
<img alt="images/logol.jpg"/> 








images/logo. jpg 


images/logol. jpg 
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<img alt="images/logo2.jpg"/> images/logo2. Joe 
</figure> 
<figcaption> 标 题 提 示 </figcaption> 标题 提示 
</body> 人 
</html> 


= 图 3-16 多 张 图 片 、 同 一 标题 的 figure 元 素 的 使 用 
在 正 11.0 中 预览 ， 效 果 如 图 3-16 所 示 。 


3.2.5 ”案例 10 一 一 address 元 素 的 使 用 


address 元 素 用 来 在 文档 中 呈现 联系 信息 ， 包 括 文档 作者 或 文档 维护 者 的 名 字 ， 以 及 其 网 
站 链接 、 电 子 邮箱 、 真 实地 址 、 电 话 号 码 等 。 
address 标签 的 实现 代码 如 下 : 


<address> 
<a href=...>...</a> 


</address> 





【 例 3.17) address 元 素 的 使 用 (案例 文件 : chO3\3.17.html). 
<!DOCTYPE html> RE 
<html> @ B) OAR.171 D> | SB ONERE ONZ. | 
<body> IHA ARE SEV) GERA) IAT 帮 肥 (| 
<address> K= 2p EZ 

<a href=http://blog.sina.com.cn/ 


zhangsan> 张 三 </a> 
<a href=http://blog.sina.com.cn/ 








lisi># [</a> 
<a href=http://blog.sina.com.cn/ 
wanger> 王 二 </a> 
EES apy /alog sina comens 
sfe 3-17 address 元 素 的 使 用 
</html> 


Æ IE 11.0 中 预览 ， 效 果 如 图 3-17 所 示 。 
另外 ，address 元 素 不 仅 可 以 单独 使 用 ， 还 可 以 与 footer 元 素 、time 元 素 结合 使 用 。 
【 例 3.18] address 元 素 与 其 他 元 素 结合 使 用 (案例 文件 : ch03\3.18.html). 


<!DOCTYPE html> 
<html> 

<body> 

<footer> 


3 $ 
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<div> 


<address> 
<a title=" 文 章 作 者 : K=" href="http://blog.sina.com.cn/zhangsan"> 
张 三 </a> 
</address> 
发 表 于 <time datetime="2017-11-17">2017 年 11 月 17 A</time> 
</div> 
</footer> 
</body> 
</html> 


在 正 11.0 中 预览 ， 效 果 如 图 3-18 Pras. 





- ao x 
© owast O - © || E vawrem\chor\3.18... x 
文件 (F) RSE) EEV) SERA IAM 帮助 (H) 


ae 二 | 文章 作者 : 张 三 
REFIT 17H 

















图 3-18 address 元 素 与 其 他 元 素 结合 使 用 


3.3 ”新 增 其 他 常用 元 素 


除了 结构 元 素 外 ， 在 HTML 5 中 ， 还 新 增 了 其 他 元 素 ， 如 mark TOR. p TH. rt 元 素 、 
ruby 元 素 、progress 元 素 、command 元 素 、embed 元 素 、details 元 素 、summary 元 素 、 
datalist 元 素 等 。 


3.3.1 案例 11 一 一 mark 元 素 的 使 用 


mark 元 素 主要 用 来 在 视觉 上 向 用 户 呈 现 那 些 需要 突出 显示 或 高 亮 显示 的 文字 。mark 元 素 
的 一 个 比较 典型 的 应 用 就 是 在 搜索 结果 中 向 用 户 高 亮 显示 搜索 关键 词 。 其 使 用 方法 与 <em> 和 
<strong> 有 相似 之 处 ， 但 相 比 而 言 ，HTML 5 中 新 增 的 mark 元 素 在 突出 显示 时 更 加 随意 与 
HTML 5 中 代码 示例 如 下 : 


<p>.. <mark>...</mark> .</p> 


【 例 3.19】mark 元 素 的 使 用 (案例 文件 :ch03\3.19.html)。 

在 页 面 中 ， 首 先 使 用 <h2> 元 素 创建 一 个 标题 “优秀 开发 人 员 的 素质 ”， 然 后 通过 <p> 元 素 
对 标题 进行 亲 述 。 在 阐述 的 文字 中 ， 为 了 引起 用 户 的 注意 ， 使 用 <mark> 元 素 高 亮 处 理 字 符 
“素质 ”“ 过 硬 ” 和 “务实 ”。 

具体 的 代码 如 下 : 


<!DOCTYPE html> 


<html> 
<head> 
<title>mark 元 素 的 使 用 </title> 
</head> 
<body> 
<h2> 优 秀 开发 人 员 的 <mark> 素 质 </mark></h2> 
<p> 一 个 优秀 的 Web 页 面 开发 人 员 ， 必 须 具 有 <mark> 过 硬 </mark> 的 技术 与 <mark> 务 实 </mark> 
的 专业 精神 </p> 





SMS yp TANLIHTSTANLH fhe a 





</body> 
</html> - 0 x 
i 司 DNRENho33191 P - | Smarr D oF 
在 IE 11.0 中 预览 ， 效果 如 图 3-19 所 示 。 ZEF SEE Se) UEA) LAT) MH) 
优秀 开发 人 员 的 素质 
ite mark 元 素 的 这 种 高 亮 显示 的 特 
之 档 中 突出 显示 外 ， 还 。 一 个 优秀 的 heb 页 而 开发 人 员 ， 必 须 具有 过 而 的 技 
A 征 ， 除 用 于 文档 中 突出 显示 外 ， 还 KSAR EUA 





常用 于 查看 搜索 结果 页 面 中 关键 字 
的 高 亮 显示 ， 其 目的 主要 是 引起 用 


户 的 注意 。 N 
3-19 mark 元 素 的 使 用 


虽然 mark 元 素 在 使 用 效果 上 与 em 或 strong 元 素 有 相似 之 处 ， 但 三 者 的 出 发 
点 是 不 一 样 的 。strong 元 素 是 作者 对 文档 中 某 段 文字 的 重要 性 进行 的 强调 ; em 元 
素 是 作者 为 了 突出 文章 的 重点 而 进行 的 设置 ; mark 元 素 是 数据 展示 时 ， 以 高 亮 形 
式 显示 某 些 字符 ， 与 原作 者 本 意 无 关 。 








=$ ) 
让 ~ 


3.3.2 ”案例 12 一 一 rp THA. t 元 素 与 ruby 元 素 的 使 用 


ruby 元 素 由 一 个 或 多 个 字符 (需要 一 个 解释 /发 音 ) 和 一 个 提供 该 信息 的 rt 元 素 组 成 ， 还 包 
括 可 选 的 tp 元素 ， 定 义 当 浏览 器 不 支持 ruby 元 素 时 显示 的 内 容 。 
rp TGR. rt 元 素 与 ruby 元 素 结合 使 用 的 代码 如 下 。 


<ruby> 
<rt><rp>(</rp> <rp>)</rp></rt> 
</ruby> 


【 例 3.20】 使 用 ruby ERREF “HR” (RPF: chO3\3.20.html). 


<!DOCTYPE html> 
<html> 
<body> 
<ruby> 
Yi<rp> (</rp><rt>han</rt><rp>) </rp> We 
字 <rp> (</rp><rt>zi</rt><rp>) </rp> 
</ruby> 
</body> 
</html> 


Æ TE 11.0 中 预览 ， 效 果 如 图 3-20 所 示 。 3-20 ”使 用 ruby 注释 繁体 字 “ 汉 ” 





- o x 
E) DARE ch03\3.204 O ~ © | E muby 元 素 的 使 用 x | 
文件 中。 RAE) BEV) SERA IAD 帮助 (H) 
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= 
aw 支持 ruby 元 素 的 浏览 器 不 会 显示 p 元 素 的 内 容 。 


3.3.3 ”案例 13 一 一 progress 元 素 的 使 用 


progress 元 素 表示 运行 中 的 进程 。 可 以 使 用 progress 元 素来 显示 JavaScript 中 耗费 时 间 的 
函数 进程 。 例 如 下 载 文件 时 ， 文 件 下 载 到 本 地 的 进度 值 可 以 通过 该 元 素 动态 展示 在 页 面 中 ， 
展示 的 方式 既 可 以 使 用 整数 (如 1 一 100)， 也 可 以 使 用 百分比 (如 10% ~ 100%). 

<progress> 元 素 的 属性 及 其 描述 如 表 3-1 所 示 。 


表 3-1 <progress> 元 素 的 属性 及 其 描述 








整数 或 浮 点 数 设置 完成 时 的 值 ， 表 示 总 体 工作 量 
整数 或 浮 点 数 设置 正在 进行 时 的 值 ， 表 示 已 完成 的 工作 量 





Q p <progress> 元 素 中 设置 的 value 值 必须 小 于 或 等 于 max 属性 值 ， 且 两 者 都 必 
& 须 大 于 0。 


【 例 3.21】 使 用 progress 元 素 表示 下 载 进度 (案例 文件 ，ch03\3.21.html)。 


<!DOCTYPE HTML> 





= o x 

<html> | E) py 理 fdho214 O - C | E oma chos\s.21... x 
oo RAT aa XHA MRO BE) SWRA IAM) RH 

g : 时 象 的 下 载 进度 ， 

<progress value="40" max="100">> ST 

</progress> 
</body> 
</html> 
#2 TE 11.0 中 预览 ， 效 果 如 图 3-21 所 示 。 3-21 使 用 progress 元 素 表示 下 载 进度 


3.3.4 案例 14 一 一 command 元 素 的 使 用 


command 元 素 表 示 用 户 能 够 调用 的 命令 ， 可 以 定义 命令 按钮 ， 如 单 选 按钮 、 复 选 框 或 
按钮 。 
在 HTML 5 中 使 用 command 元 素 的 代码 如 下 : 


<command type="command">...</command> 


【 例 3.22】 使 用 command 元 素 标记 一 个 按钮 (案例 文件 : ch03\3.22.html)。 


<!DOCTYPE HTML> 
<html> 
<body> 
<menu> 
<command onclick="alert ('Hello World') ">Click Me!</command> 





























Sia a eee) 
</body> JOE rAveersiadminist P= © x | B HAsers adm 
</html> esata EE 

et + ss Se Click Me! 
pr 目前 ， 主 流 浏 览 器 都 不 支持 
il 


意 <command> 标签 。 只 有 IE 9.0 支持 
<command> 标签 ， 其 他 之 前 版 本 或 
者 之 后 版 本 的 IE 浏览 器 都 不 支持 
<command> 标签 。 
Æ E 9.0 中 预览 ， 效 果 如 图 3-22 所 示 。 单 击 。 图 3-22 使 用 command 元 素 标记 一 个 按 角 
网 页 中 的 Click Me 区 域 ， 将 弹出 提示 信息 框 。 
m 只 有 当 command 元 素 位 于 menu 元 素 内 时 ， 该 元 素 才 是 可 见 的 ; SM, KA 
外 显示 这 个 元 素 ， 但 是 可 以 用 它 规定 键盘 快捷 键 。 


3.3.5 ”案例 15 一 一 embed 元 素 的 使 用 


embed 元 素 用 来 插入 各 种 多 媒体 ， 格 式 可 以 = 
Æ MIDI, WAV, AIFF, AU, MP3 等 。 | 站 Da © | S ove x| 
{E HTML 5 中 使 用 embed 元 素 的 代码 如 下 : RHA RE) BY tA) IAT WH 


<embed src="..."/> 


【 例 3.23】 使 用 embed 元 素 插入 动画 (案例 文 
件 : ch03\3.23.html)。 


<!DOCTYPE HTML> 

<html> 

<body> 

<embed src="images/ 飞 翔 的 海岛 .swf"/> 
</body> 


Sinem 3-23 使 用 embed 元 素 插 入 动画 
在 IE 11.0 中 预览 ， 效 果 如 图 3-23 所 示 。 


3.3.6 ”案例 16 一 一 details 元 素 与 summary 元 素 的 使 用 


details 元 素 表示 用 户 要 求 得 到 并 且 可 以 得 到 的 细节 信息 ， 与 summary 元 素 配合 使 用 。 
summary 元 素 提供 标题 或 图 例 。 标 题 是 可 见 的 ， 用 户 单 击 标题 时 会 显示 出 细节 信息 。summary 
元 素 应 该 是 details 元 素 的 第 一 个 子 元 素 。 

在 HTML 5 中 使 用 details 元 素 和 summary 元 素 的 代码 如 下 。 


<details> 
<summary>...</summary> 


























</details> 


【 例 3.24) (8/8 details 元 素 制 作 简单 页 面 (案例 文件 : ch03\3.24.html). 
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<!DOCTYPE HTML> 
<html> 
<body> 
<details> 
<summary> RUKBR</summary> 
<img src="images/ 冰 激 凌 .jpg” alt=" 苹 果 冰 激 凌 "/> 
<div> 
<h3> 材料 : 苹果 500g， 白 糖 150g， 新 鲜 牛 奶 两 瓶 。</h3> 
<P> 制 作 方法 : 将 苹果 洗 净 ， 去 皮 挖 核 ， 切 成 薄片 ， 搅 成 桨 状 ， 放 入 白糖 及 1000 克 开 水 ， 加 入 
煮沸 的 牛奶 ， 搅 拌 均匀 ， 倒 入 盛 器 内 冷却 后 置 于 冰箱 冻结 即 成 。 
</p> 
</div> 
</details> 
</body> 
</html> 


Æ TE 11.0 中 预览 ， 效 果 如 图 3-24 所 示 。 
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p 1 
苹果 冰激凌 ie pea 7 
材料 : 苹果 500g， 白 糖 150g， 新 鲜 牛 奶 两 瓶 。 
制作 方法 : 将 苹果 洗 净 ， 去 皮 挖 核 ， 切 成 游 片 ， 摸 成 桨 状 ， 放 入 


白 灶 及 1000 克 开水 ， 加 入 者 沸 的 牛奶 ， 搅 拌 均匀 ， 倒 入 幻 器 内 冷 
即 后 置 于 冰箱 冻结 即 成 。 











3-24 (EF details 元 素 制作 简单 页 面 


wae 在 默认 情况 下 ， 浏 览 器 支持 details TH, 除了 summary 标签 外 的 内 容 将 会 被 
隐藏 。 


3.3.7 ”案例 17 一 一 datalist 元 素 的 使 用 


datalist 是 用 来 辅助 文本 框 的 输入 功能 ， 它 本 身 是 隐藏 的 ， 与 表单 文本 框 中 的 list 属性 
绑 定 ， 即 将 list 属性 值 设置 为 datalist 的 ID 号 。 它 类 似 于 suggest 组 件 。 目 前 只 支持 Opera 浏 
览 器 。 

在 HTML 5 中 使 用 datalist 元 素 的 代码 如 下 : 


<datalist></datalist> 


【 例 3.25) (EH datalist 元 素 制作 下 拉 列 表 框 (案例 文件 : chO3\3.25 html). 


<!DOCTYPE HTML> 
<html> 


<head> 
<title>datalist 测试 </title> 
</head> 
<body> 
<form action="#"> 
<fieldset> 
<legend> 请 输入 职业 </legend> 
<input type="text" list="worklist"> 
<datalist id="worklist"> 
<option value=" 程 序 开发 员 "></option> 
<option value=" 系 统 架构 师 "></option> 
<option value=" 数 据 维护 员 "></option> 
</datalist> 
</fieldset> 
</form> 
</body> 
</html> 


在 正 11.0 中 预览 ， 效 果 如 图 3-25 所 示 。 


SMS p IWLH dTSIWLH fhe a 








= a x 
E) ONERE ch03\3254 O ~ © || S datalistat x 
ZAA WAE EEV 收藏 天 (A) IAT) AH) 
请 输入 职业 














3-25 ”使 用 datalist 元 素 制作 下 拉 列 表 框 


34 ”新 增 全 局 属性 


在 HTML 5 中 新 增 了 许多 全 局 属性 。 下 面 详细 介绍 常用 的 新 增 属性 。 


3.4.1 案例 18 一 一 contentEditable 属性 的 使 用 


contentEditable 属性 是 HTML 5 中 新 增 的 标准 属性 ， 其 主要 功能 是 指定 是 否 允 许 用 户 编 辑 
内 容 。 该 属性 有 两 个 值 : true 和 false。 

contentEditable 属性 为 tue 表示 可 以 编辑 ，false 表示 不 可 编辑 。 如 果 没 有 指定 值 则 会 采用 
隐藏 的 inherit( 继 承 ) 状 态 ， 即 如 果 元 素 的 父 元 素 是 可 编辑 的 ， 则 该 元 素 就 是 可 编辑 的 。 

【 例 3.26】 使 用 contentEditable 属性 的 实例 (案例 文件 : ch03\3.26.html)。 


<!DOCTYPE html> 

<HTML> 

<head> 

<title>contentEditable 属性 示例 </title> 
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</head> 
<body> 
<h3> 对 以 下 内 容 进行 编辑 内 容 </h3> | 
<ol contentEditable="true"> | zsm ED SEV IA IAM Bm 
<1i> 列 表 一 </1i> 
<1i> 列 表 二 </1i> 对 以 下 内 容 进行 编辑 内 容 
<1i> 列 表 三 </1i> L 列表 一 
</ol> 2. 列表 二 
</body> 3， 列 表 三 
</html> 
使 用 IE 11.0 预览 ， 打 开 后 可 以 在 网 页 中 输入 相 
关内 容 ， 效 果 如 图 3-26 所 示 。 3-26 使 用 contentEditable 属性 的 实例 
o? 对 内 容 进行 编辑 后 ， 如 果 关 闭 网 页 ， 编 辑 的 内 容 将 不 会 被 保存 。 如 果 想 要 保存 


背 波 其中 的 内 容 ， 只 能 把 该 元 素 的 innerHTML 发 送 到 服务 器 端 进行 保存 ， 
3.4.2 ”案例 19 一 一 spellcheck 属性 的 使 用 


spellcheck 属性 是 HTML 5 中 的 新 属性 ， 规 定 是 否 对 元 素 内 容 进 行 拼写 检查 。 可 对 以 下 
文本 进行 拼写 检查 : 类 型 为 text 的 input 元 素 中 的 值 ( 非 密码 )、textarea 元 素 中 的 值 、 可 编 
辑 元 素 中 的 值 。 

【 例 3.27】 使 用 spellcheck 属性 的 实例 (案例 文件 ，ch03\3.27.html)。 


<!DOCTYPE html> 
<html> 

<head> x 
<title>hello, word</title> QD em row 
</head> IA WE) SEV WAW IAM ARKH) 

aaah 使 用 spellcheck 忆 性， 使 段落 内 容 可 被 编辑 。 
<p contenteditable="true" 

spellcheck="true"> 使 用 spellcheck 属性 ， 使 段 我 在 编辑 内 容 .….| 

落 内 容 可 被 编辑 。</p> 
</body> 

</html> 


使 用 TE 11.0 预览 ， 打 开 后 可 以 在 网 页 中 输入 相关 图 3-27 (EA spellcheck 属性 的 实例 
内 容 ， 效 果 如 图 3-27 所 示 。 


3.4.3 ”案例 20 一 一 tabIndex 属性 的 使 用 


tabIndex 属性 可 设置 或 返回 按钮 的 Tab 键 控制 次 序 。 打 开 页 面 ， 连 续 按 Tab 键 ， 会 在 按 
钮 之 间 进行 切换 ，tabIndex 属性 则 可 以 记录 显示 切换 的 顺序 。 

【 例 3.28】 使 用 tabIndex 属性 的 实例 (案例 文件 : ch03\3.28.htmD) 。 

<!DOCTYPE html> 

<html> 

<head> 


<script type="text/javascript"> 
function showTabIndex() 








var btl=document.getElementById('"bt1') .tabIndex; 
var bt2=document.getElementById('"bt2') .tabIndex; 
var bt3=document .getElementById('bt3') .tabIndex; 
document.write ("Tab 切换 按钮 1 的 顺序 : " + btl); 
document .write("<br />"); 

document .write("Tab 切换 按钮 2 的 顺序 : " + bt2); 
document .write("<br />"); 

document .write ("Tab 切换 按钮 3 的 顺序 : ”+ bt3); 
}</script> 

</head> 

<body> 

<button id="bt1" tabIndex="1"> 按 钮 1</button><br /> 
<button id="bt2" tabIndex="2"> 按 钮 2</button><br /> 
<button id="bt3" tabIndex="3"> 按 钮 3</button><br /> 
<br/> 

<input type="button" onclick="showTabIndex()" value=" 显 示 切 换 顺序 ” /> 
</body> 

</html> 


使 用 正 11.0 预览 ， 打 开 后 多 次 按 Tab 键 ， 使 控制 中 心 在 几 个 按钮 对 象 间 切 换 ， 如 图 3-28 所 示 。 
单 击 “ 显 示 切 换 顺 序 ” 按 钮 ， 显 示 出 依次 切换 的 顺序 ， 如 图 3-29 所 示 。 
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erty Tab 切 换 按 钮 2 的 顺序 : 
Heaths Tab 切 换 按钮 3 的 顺序 : 3 


显示 切换 顺序 











图 3-28 使 用 tablndex 属性 的 实例 图 3-29 显示 切换 顺序 


3.5 “新 增 的 其 他 属性 


新 增 属性 主要 分 为 三 大 类 : 表单 相关 属性 、 链 接 相 关 属 性 和 其 他 新 增 属 性 。 具 体内 容 介 
绍 如 下 。 


3.5.1 案例 21 一 一 表单 相关 属性 的 使 用 
新 增 的 表单 属性 有 很 多 ， 下 面 来 分 别 进行 介绍 。 


1. autocomplete 


autocomplete 属性 规定 form 或 input 域 应 该 拥有 自动 完成 功能 。autocomplete 适用 于 
<form> 标 签 ， 以 及 以 下 类 型 的 <input> 标 签 : text, search, url, telephone, email, password, 
datepickers. range, color. 


【 例 3.29】 使 用 autocomplete 属性 的 实例 (案例 文件 : ch03\3.29.html). 


<!DOCTYPE HTML> 
<html> 


4 @ 
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<body> 
<form action="demo form.asp" method="get" autocomplete="on"> 
姓名 :<input type="text" name=" 姓 名 " /><br /> 
性 别 : <input type="text" sex=" 性 别 ” /><br /> 
邮箱 : <input type="email" name="email" autocomplete="off" /><br /> 
<input type="submit" /> 
</form> 
</body> 
</html> 


使 用 正 11.0 预览 ， 效 果 如 图 3-30 所 示 。 
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图 3-30 使 用 autocomplete 属性 的 实例 


2. autofocus 


autofocus 属性 规定 在 页 面 加 载 时 ， 域 自动 地 获得 焦点 。autofocus 属性 适用 于 所 有 <input> 
标签 的 类 型 。 
【 例 3.30】 使 用 autofocus 属性 的 实例 (案例 文件 : ch03\3.30.html)。 


<!DOCTYPE HTML> 

<html> 

<body> 

<form action="demo form.asp" method="get"> 
APA: <input type="text" name="user name" autofocus="autofocus" /> 
<input type="submit" /> 

</form> 

</body> 

</html> 


使 用 IE 11.0 预览 ， 效 果 如 图 3-31 所 示 。 
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图 3-31 使 用 autofocus 属性 的 实例 


3. form 


form 属性 规定 输入 域 所 属 的 一 个 或 多 个 表单 。form 属性 适用 于 所 有 <input> 标 签 的 类 型 ， 
必须 引用 所 属 表单 的 id。 
【 例 3.31】 使 用 form 属性 的 实例 (案例 文件 : chO3\3.31html) 


<!DOCTYPE HTML> 
<html> 
<body> 
<form action="demo form.asp" method="get" id="user form"> 
姓名 :<input type="text" name=" 姓 名 " /> 
<input type="submit" /> 
</form> 
性 别 : <input type="text" sex=" 性 别 " form="user form" /> 
</body> 
</html> 


使 用 正 11.0 预览 ， 效 果 如 图 3-32 所 示 。 
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Æ 3-32 使 用 form 属性 的 实例 
4. form overrides 


表单 重 写 属性 (form overrides attributes) 人 允许 重新 设 定 form 元 素 的 某 些 属性 。 
表单 重 写 属性 如 下 。 
(1) formaction: 重 写 表单 的 action 属性 。 
(2) formenctype: 重 写 表单 的 enctype 属性 。 
(3) formmethod: 重 写 表单 的 method 属性 。 
(4) formnovalidate: 重 写 表单 的 novalidate 属性 。 
(5) formtarget: 重 写 表单 的 target 属性 。 
表单 重 写 属性 适用 于 以 下 类 型 的 <input> 标 签 : submit 和 image。 
【 例 3.32】 使 用 form overrides 属性 的 实例 (案例 文件 : ch03\3.32.html). 
<!DOCTYPE HTML> 
<html> 
<body> 
<form action="demo_form.asp" method="get" id="user_form"> 
邮箱 : <input type="email" name="userid" /><br /> 
<input type="submit" value=" 提 交 " /><br /> 
<input type="submit" formaction="demo admin.asp" value=" 以 管理 员 身 份 提交 " 
/><br /> 
<input type="submit" formnovalidate="true" value=" 提 交 未 经 验证 " /><br /> 
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</form> 
</body> 
</html> 


使 用 下 11.0 预览 ， 效 果 如 图 3-33 所 示 。 
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3-33 {EM form overrides 属性 的 实例 
5. height 和 width 


height 和 width 属性 规定 用 于 image 类 型 的 input 标签 的 图 像 高 度 和 宽度 。height 和 width 
属性 只 适用 于 image 类 型 的 <input> 标 签 。 
【 例 3.33】 使 用 height 和 width 属性 的 实例 (案例 文件 : ch03\3.33.html)。 


<!DOCTYPE HTML> 
<html> 
<body> 
<form action="demo_form.asp" method="get"> 
FAP: <input type="text" name="user name" /><br /> 
<input type="image" src="/images/ 按 钮 .jpg" width="99" height="99" /> 
</form> 
</body> 
</html> 


使 用 IE 11.0 预览 ， 效 果 如 图 3-34 所 示 。 
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图 3-34 使 用 height 和 width 属性 的 实例 
6. list 


list 属性 规定 输入 域 的 datalist。datalist 是 输入 域 的 选项 列表 。list 属性 适用 于 以 下 类 型 的 
<input> 标 签 : text, search, url, telephone, email, date pickers, number. range 及 color. 


【 例 3.34】 使 用 list 属性 的 实例 (案例 文件 : ch03\3.34.htmD)。 


<!DOCTYPE HTML> 
<html> 
<body> 
<form action="demo_form.asp" method="get"> 
主页 : <input type="url" list="url list" name="link" /> 
<datalist id="url list"> 
<option label="baidu" value="http://www.baidu.com" /> 
<option label="qq" value="http://www.qq.com" /> 
<option label="Microsoft" value="http://www.microsoft.com" /> 
</datalist> 
<input type="submit" /> 
</form> 
</body> 
</html> 


使 用 IE 11.0 预览 ， 效 果 如 图 3-35 所 示 。 


SMS p IWLH dTSIWLH fhe M 





= a x 
E) px 源码 kho3\3.341 O ~ GG DA 天 代码 vch03\3.34. x 
文件 (月 SRE EEV CEA IAT) WRH) 


主页 : 提交 查询 内 容 














图 3-35 使 用 list 属性 的 实例 
7. min, max 和 step 


min, max 和 step 属性 用 于 为 包含 数字 或 日 期 的 input 类 型 规定 限定 (约束 )。max 属性 规 
定 输入 域 所 允许 的 最 大 值 ， min 属性 规定 输入 域 所 允许 的 最 小 值 ，step 属性 为 输入 域 规定 合法 
的 数字 间隔 (如 果 step="3"， 则 合法 的 数 是 -3、0、3、56 等 )。 

min, max 和 step 属性 适用 于 以 下 类 型 的 <input> 标 签 : date pickers, number 及 range. 

【 例 3.35】 使 用 min, max 和 step 属性 的 实例 (案例 文件 ，ch03\3.35.html)。 


<!DOCTYPE HTML> 
<html> 
<body> 
<form action="demo form.asp" method="get"> 
成 绩 : <input type="number" name="points" min="0" max="10" step="3"/> 
<input type="submit" /> 
</form> 
</body> 
</html> 


使 用 IE 11.0 预览 ， 效 果 如 图 3-36 所 示 。 
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8. multiple 


multiple 属性 规定 输入 域 中 可 选择 多 个 值 。multiple 属性 适用 于 以 下 类 型 的 <input> 标 签 : 
email 和 file。 
【 例 3.36】 使 用 multiple 属性 的 实例 (案例 文件 ，ch03\3.36.html)。 


<!DOCTYPE HTML> 
<html> 
<body> 
<form action="demo_form.asp" method="get"> 
选择 图 片 : <input type="file" name="img" multiple="multiple" /> 
<input type="submit" /> 
</form> 
</body> 
</html> 


使 用 IE 11.0 预览 ， 效 果 如 图 3-37 所 示 。 
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选择 图 片 : WA... 











Æ 3-37 使 用 multiple 属性 的 实例 


Se 单 击 “ 浏 览 ”按钮 ， 可 以 打开 “选择 要 加 载 的 文件 ”对 话 框 ， 在 其 中 选择 要 
SS 添加 的 图 片 信息 。 


9. pattern (regexp) 
pattern 属性 规定 用 于 验证 input 域 的 模式 (pattern)， 适 用 于 以 下 类 型 的 <input> 标 签 : text, 


search、url、telephone、email 及 password。 


【 例 3.37】 使 用 pattern 属性 的 实例 (案例 文件 : chO3\3.37.html). 


<!DOCTYPE HTML> 

<html> 

<body> 

<form action="demo_form.asp" method="get"> 
电话 区 号 : <input type="text" name="country code" pattern="[A-z]{3}" 
title="Three letter country code" /> 
<input type="submit" /> 

</form> 

</body> 

</html> 


使 用 IE 11.0 预览 ， 效 果 如 图 3-38 所 示 。 
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3-38 ”使 用 pattern 属性 的 实例 
10. placeholder 


placeholder 属性 提供 一 种 提示 (hint)， 描 述 输入 域 所 期 待 的 值 。placeholder 属性 适用 于 以 
下 类 型 的 <input> 标 签 : text、search、url、telephone、email 及 password。 
【 例 3.38】 使 用 placeholder 属性 的 实例 (案例 文件 : ch03\3.38.html)。 


<!DOCTYPE HTML> 

<html> 

<body> 

<form action="demo form.asp" method="get"> 
<input type="search" name="user search" placeholder="baidu" /> 
<input type="submit" /> 

</form> 

</body> 

</html> 


使 用 IE 11.0 预览 ， 效 果 如 图 3-39 所 示 。 
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3-39 ”使 用 placeholder 属性 的 实例 
11. required 
required 属性 规定 必须 在 提交 之 前 填写 输入 域 (不 能 为 空 )。required 属性 适用 于 以 下 类 型 


的 <inpu 人 标签 : text, search, url, telephone. email, password, date pickers, number, 
checkbox, radio 及 file. 
【 例 3.39】 使 用 required 属性 的 实例 (案例 文件 : ch03\3.39.html). 


<!DOCTYPE HTML> 

<html> 

<body> 

<form action="demo form.asp" method="get"> 

: <input type="text" name="usr name" required="required" /> 
<input type="submit" /> 

</form> 

</body> 

</html> 
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使 用 TE 11.0 预览 ,效果 如 图 3-40 所 示 。 
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图 3-40 使 用 required 属性 的 实例 
3.5.2 ”案例 22 一 一 链接 相关 属性 的 使 用 
新 增 的 与 链接 相关 的 属性 介绍 如 下 。 


1. media 


media 属性 规定 目标 URL 是 为 什么 类 型 的 媒介 /设备 进行 优化 的 。 该 属性 用 于 规定 目标 
URL 是 为 特殊 设备 (如 iPhone)、 语 音 或 打印 媒介 设计 的 。 只 能 在 href 属性 存在 时 使 用 。 
【 例 3.40】 使 用 media 属性 的 实例 (案例 文件 : chO3\3.40.html) 


<!DOCTYPE HTML> 
<html> 
<body> 
<a href="www.baidu.com" media="print and (resolution: 300dpi) "> 
链接 查询 . 
</a> 
</body> 
</html> 


使 用 IE 9.0 预览 ， 效 果 如 图 3-41 所 示 。 
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图 3-41 使 用 media 属性 的 实例 
2. type 


在 HTML 5 中 ， 为 area 元 素 增加 了 type 属性 ， 规 定 目标 URL 的 MIME 类 型 。 仅 在 href 
属性 存在 时 使 用 。 
语法 格式 如 下 。 


<input type="value"> 


3. Sizes 


为 link 元 素 增 加 了 新 属性 sizes。 该 属性 可 以 与 icon 元 素 结合 使 用 (通过 rel 属性 )， 该 属性 


指定 关联 图 标 (icon 元 素 ) 的 大 小 。 


4. target 


X base 元 素 增加 了 target 属性 ， 主 要 目的 是 保持 与 a 元 素 的 一 致 性 。 
【 例 3.41】 使 用 sizes 与 target 属性 的 实例 (案例 文件 : ch03\3.41.html). 


<!DOCTYPE html> 
<html> 
<head> 
<link rel="icon" href="demo icon.ico" type="image/gif" sizes="16x16" /> 
</head> 
<body> 
<h2>Hello world!</h2> 
<p> 打 开 <a href="2.40.html" target=" blank"> 新 链接 /a> 窗 口 。</p> 
</body> 
</html> 


使 用 TE 11.0 预览 ， 效 果 如 图 3-42 所 示 。 
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图 3-42 使 用 sizes 5 target 属性 的 实例 


3.5.3 ”案例 23 一 一 其 他 新 增 属性 的 使 用 


除了 以 上 介绍 的 与 表单 和 链接 相关 的 属性 外 ，HTML 5 还 增加 了 其 他 属性 ， 如 表 3-2 所 示 。 
表 3-2 HTML 5 增加 的 其 他 属性 























属 性 隶属 于 意义 
reversed ol 元 素 指定 列表 倒序 显示 
charset meta 元 素 为 文档 字符 编码 的 指定 提供 了 一 种 良好 的 方式 
type menu 元 素 让 菜单 可 以 以 上 下 文 菜 单 、 工 具 条 与 列表 菜单 3 种 形式 出 现 
label menu 元 素 为 菜单 定义 一 个 可 见 的 标注 
scoped style THK 用 来 规定 样式 的 作用 范围 ， 壁 如 只 对 页 面 上 某 个 数 起 作用 
async script 元 素 定义 脚本 是 否 异步 执行 
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续 表 












属 性 隶属 于 意义 


开发 离线 Web 应 用 程序 时 它 与 API 结合 使 用 ， 定 义 一 个 URL, 在 
这 个 URL 上 描述 文档 的 缓存 信息 








manifest html 元 素 





sandbox、srcdoc 与 
seamless 


SN 3.6 HTML 5 废除 的 属性 


在 HTML 5 中 废除 了 很 多 不 需要 再 使 用 的 属性 ， 这 些 属性 将 采用 其 他 属性 或 方案 进行 蔡 
代 ， 具 体内 容 如 表 3-3 所 示 。 


iframe 元 素 | 用 来 提高 页 面 安全 性 ， 防 止 不 信任 的 Web 页 面 执行 某 些 操作 


表 3-3 HTML 5 中 废除 的 属性 


废除 的 属性 在 HTML 5 中 代替 的 方案 
rev rel 
charset 在 被 链接 的 资源 中 使 用 HTTP content-type 头 元 素 
shape, coords las 使 用 area 元 素 代替 a 元 素 
longdesc img, iframe 使 用 a 元 素 链接 到 较 长 描述 
target link 多 余 属 性 ， 被 省 略 
nohref |area sd RIMM, WEP 
profile head 多 余 属 性 ， 被 省 略 


version lnm | 多 余 属 性 ， 被 省 略 
name [ime i 


scheme 只 为 某 个 表单 域 使 用 scheme 


Archiver Ciad baes 使 用 data 与 type 属性 类 调用 插件 。 需 要 使 用 这 些 属 
object 


codetype，declare，standby 性 来 设置 参数 时 ， 使 用 param 属性 





valuetype，type Param 使 用 name 与 value 属性 ， 不 声明 值 的 MIME 类 型 
使 用 以 明确 简洁 的 文字 开头 ， 后 跟 详 述 文字 的 形式 。 

axis, abbr td, th 可 以 对 更 详细 内 容 使 用 title 属性 ， 来 使 单元 格 的 内 
容 变 得 简短 


Scope td 在 被 链接 的 资源 中 使 用 HTTP C ‘ontent-type 头 元 素 


caption ， input ， 





legend, div, hl, 
h2, h3, h4, h5, 
h6, p 


align 使 用 CSS 样式 表 进 行 蔡 代 





废除 的 属性 


Alink, link, text, vlink, 


background, bgcolor 


使 用 该 属性 的 元 素 


在 HTML 5 中 代替 的 方案 





Align, bgcolor, border, 
cellpadding, cellspacing, 
Frame, rules, width 
Align, char, charoff, 
height, nowrap, valign 


body 使 用 CSS 样式 表 进 行 蔡 代 
table 使 用 CSS 样式 表 进 行 蔡 代 


tbody, thead, 
tfoot 


使 用 CSS 样式 表 进行 蔡 代 





align, bgcolor, char, 


charoff, height, nowrap, 


valign, width 

Align, bgcolor, char, 
charoff, valign 
Align, char, charoff, 
valign, width 

Align, border, hspace, 
vspace 

clear 

Compact, type 
compact 

compact 

width 


Align, hspace, vspace 


Align, noshade, size, width 


Align, frameborder, 
scrollingmarginheight, 
marginwidth 


td, th 使 用 CSS 样式 表 进 行 蔡 代 


eo] 使 用 CSS 样式 表 进 行 蔡 代 


object 使 用 CSS 样式 表 进 行 蔡 代 


lor | 使 用 css 样式 表 进 行 蔡 代 
Jol, ,i 。 | 使 用 Css 样式 表 进行 葵 代 


使 用 CSS 样式 表 进 行 蔡 代 





[menu | 使 用 css 样式 表 进 行营 代 
[pre | A Css Bat Ae AT BA 
lime | 使 用 css 样式 表 进行 普 代 


使 用 CSS 样式 表 进行 蔡 代 


iframe 使 用 CSS 样式 表 进 行 蔡 代 





autosubmit 


menu 


37 高 手 解 惑 


疑问 1: HTML 5 中 的 单 标记 和 双 标 记 书 写 方法 有 哪些 ? 


答 : HIML 5 中 的 标记 分 为 单 标记 和 双 标 记 。 单 标记 是 指 没有 结束 标记 的 标签 ， 双 标记 


既 有 开始 标签 又 包含 结束 标签 。 
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单 标记 是 不 允许 写 结束 标记 的 元 素 ， 只 允许 使 用 “< 元 素 />” 的 形式 进行 书写 。 例 如 
“<br>.….</br>” 的 书写 方式 是 错误 的 ， 正 确 的 书写 方式 为 <br >. R, E HTML 5 之 前 版 本 
中 <br> 的 这 种 书写 方法 可 以 被 沿用 。HTML 5 中 不 允许 写 结束 标记 的 元 素 有 area, base, br. 
col, command, embed, hr, img, input, keygen, link、meta、param、source、track、wbr。 

部 分 双 标记 可 以 省 略 结束 标记 。HITML 5 中 人 允许 省 略 结束 标记 的 元 素 有 li, dt. dd, p, 
rt, rp. optgroup, option, colgroup, thead, tbody, tfoot, tr, td, th. 

HTML 5 中 有 些 元 素 还 可 以 完全 被 省 略 。 即 使 这 些 标 记 被 省 略 了 ， 该 元 素 还 是 以 隐 式 的 
方式 存在 的 。HTML 5 中 允许 省 略 全 部 标记 的 元 素 有 html, head, body, colgroup, tbody. 

疑问 2: 新 增 属性 Target 在 HTML 4.01 与 HTML 5 之 间 的 差异 有 了 哪些? 


答 : 在 HTML 5 中 ， 不 再 允许 把 框架 名 称 设 定 为 目标 ， 因 为 不 再 支持 frame 和 frameset. 
self, parent 及 top 这 3 个 值 大 多 数 时 候 与 这 ame 一 起 使 用 。 
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4.1 标题 文字 的 建立 


在 HTML 文档 中 ， 文 本 的 结构 除了 以 行 和 段 出 现 之 外 ， 还 可 以 作为 标题 存在 。 通 常 一 篇 
文档 最 基本 的 结构 就 是 由 若干 不 同 级 别 的 标题 和 正文 组 成 的 。 


4.1.1 案例 1 一 一 标题 文字 标记 


NN HTML 文档 中 包含 有 各 种 级 别 的 标题 。 各 种 级 别 的 标题 由 <h1> 到 <h6> 元 素来 定义 。<h1> 
至 <h6> 标 题 标 记 中 的 字母 h 是 英文 headline( 标 题 行 ) 的 简称 。 其 中 <h1> 代 表 1 级 标题 ， 级 别 最 
高 ， 文 字 也 最 大 ， 其 他 标题 元 素 依次 递减 ，<h6> 级 别 最 低 。 
【 例 4.1】 标 题 标记 的 使 用 (案例 文件 ，ch04\4.1.html)。 


<!DOCTYPE html> 
<html> 

<head> 
<title> 标 题 文 字 </title> 
</head> 

<body> 

<h1> 这 里 是 1 级 标题 </h1> 
<h2> 这 里 是 2 级 标题 </h2> 
<h3> 这 里 是 3 级 标题 </h3> 
<h4> 这 里 是 4 级 标题 </h4> 
<h5> 这 里 是 5 级 标题 </h5> 
<h6> 这 里 是 6 级 标题 </h6> 
</body> 

</html> 


在 IE 11.0 中 预览 ， 效 果 如 图 4-1 所 示 。 
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这 里 是 1 级 标题 
这 里 是 2 级 标题 

这 里 是 3 级 标题 

这 里 是 4 级 标 是 

这 里 是 5 级 标题 
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4-1 ”标题 标记 的 使 用 


gy 作为 标题 ， 它 们 的 重要 性 是 有 区 别 的 ， 其 中 <h1> 标 题 的 重要 性 最 高 ，<h6> 
fi 的 重要 性 最 低 。 


4.1.2 ”案例 2 一 一 标题 文字 的 对 齐 方 式 


标题 文字 的 对 齐 方式 主要 有 居 左 、 居 中 、 居 右 和 两 端 对 齐 ， 其 中 两 端 对 齐 方式 不 经 常 
使 用 。 
【 例 4.2】 标 题 文字 的 对 齐 方 式 (案例 文件 :ch04\4.2.html)。 


<!DOCTYPE html> 

<html> 

<body> 

<hl align="center"> Q EE 1 级 标题 居中 对 齐 </h1> 

<h2 align="left"> 这 里 是 2 级 标题 居 左 对 齐 </h2> 

<h3 align="right"> 这 里 是 3 级 标题 居 右 对 齐 </h3> 

<p> 上 面 的 标题 在 页 面 中 进行 了 各 种 对 齐 方式 的 排列 。 上 面 的 标题 在 页 面 中 进行 了 各 种 对 齐 方式 的 排 
列 。 上 面 的 标题 在 页 面 中 进行 了 各 种 对 齐 方式 的 排列 。</p> 

</body> 

</html> 


在 焉 11.0 中 预览 ,效果 如 图 4-2 frase 
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这 里 是 1 级 标题 居中 对 齐 
这 里 是 2 级 标题 居 左 对 齐 
这 里 是 3 级 标题 居 右 对 齐 


上 面 的 标题 在 页 面 中 进行 了 各 种 对 齐 方式 的 排列 。 上 面 的 标题 在 页 
面 中 进行 了 各 种 对 齐 方式 的 排列 。 上 而 的 标题 在 页 而 中 进行 了 各 种 
对 齐 方 式 的 排列 。 








图 4-2 标题 文字 的 对 齐 方 式 


42 设置 文字 格式 


一 个 杂乱 无 序 、 堆 砌 而 成 的 网 页 ， 会 使 人 感觉 枯燥 无 味 ， 而 一 个 美观 大 方 的 网 页 ， 会 让 
人 有 美 轮 美 负 、 流 连 忘 返 的 感觉 。 下 面 介 绍 如 何 设置 网 页 文字 的 格式 。 


4.2.1 案例 3 一 一 设置 文字 字体 


font-family 属性 用 于 指定 文字 字体 类 型 ， 如 宋体 、 黑 体 、 隶 书 、Times New Roman 等 ， 
即 在 网 页 中 ， 展 示 字 体 不 同 的 形状 。 语 法 格式 如 下 : 


style="font-family: 黑 体 " 
style="font-family :华文 彩云 ,黑体 , 宋体" 
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从 语法 格式 上 可 以 看 出 ，font-family 有 两 种 声明 方式 。 第 一 种 声明 方式 使 用 name 字体 名 
称 ， 按 优先 顺序 排列 ， 以 逗号 隔 开 ， 如 果 字 体 名 称 包含 空格 ， 则 应 使 用 引号 括 起 。 第 二 种 声 
明 方式 使 用 所 列 出 的 字体 序列 名 称 。 如 果 使 用 fantasy 序列 ， 将 提供 默认 字体 序列 。 第 一 种 声 
明 方 式 比 较 常用 。 

【 例 4.3】 设 置 文字 字体 及 对 齐 方式 (案例 文件 :ch04\4.3.htmD)。 


<!DOCTYPE html> 





<html> 
<head><title> 字 体 </title> 
</head> 
<body> 
<p style="font-family: 黑 体 ”align=center> 北 国 风光 ,千里 冰 封 。</p> 
</body> 
</html> 
在 正 11.0 中 浏览 ， 效果 如 图 4-3 所 示 ， 可 以 看 到 文字 为 黑体 并 居中 显示 。 
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文件 (F) RE) BBV) GERA LAT) 帮助 (H) 











北国 风光 ,千里 冰 封 。 | 





图 4-3 设置 文字 字体 及 对 齐 方式 


在 字体 显示 时 ， 如 果 指 定 一 种 特殊 字体 类 型 ， 而 在 浏览 器 或 者 操作 系统 中 该 类 型 不 能 正 
确 获 取 ， 可 以 通过 font-family 预 设 多 种 字体 类 型 。font-family 属性 可 以 预 置 多 个 供 页 面 使 用 
的 字体 类 型 ， 即 字体 类 型 序列 ， 其 中 每 种 字体 类 型 之 间 使 用 逗号 隔 开 。 如 果 前 面 的 字体 类 型 
不 能 够 正确 显示 ， 则 系统 将 自动 选择 后 一 种 字体 类 型 ， 依 次 类 推 。 所 以 ， 在 设计 页 面 时 ， 一 
定 要 考虑 字体 的 显示 问题 。 为 了 保证 页 面 达到 预期 效果 ， 最 好 提供 多 种 字体 类 型 ， 而 且 最 好 
以 最 基本 的 字体 类 型 作为 最 后 一 个 。 

其 样式 设置 如 下 。 

font-family: 华 文 彩云 , 黑体, 宋体 

当 font-family 属性 值 中 的 字体 类 型 由 多 个 字符 串 和 空格 组 成 ， 如 Times New Roman, if 

么 ， 该 值 就 需要 使 用 双 引 号 引起 来 。 


font-family: "Times New Roman" 


42.2 ”案例 4 一 一 设置 字号 


在 一 个 网 页 中 ， 标 题 通常 使 用 较 大 字体 显示 ， 用 于 吸引 人 注意 ， 小 字体 用 来 显示 正常 内 
容 ， 大 小 字体 结合 形成 网 页 ， 既 吸引 了 人 的 眼球 ， 又 提高 了 阅读 速度 。 
在 HTML 5 新 规定 中 ， 通 常 使 用 font-size 设置 文字 大 小 。 其 语法 格式 如 下 : 


Style="font-size : 数值 | inherit | xx-small | x-small | small | medium | 
large | x-large | xx-large | larger | smaller | length" 


rs fi 


u 





SH ee 





其 中 ， 通 过 数值 来 定义 字体 大 小 ， 例 如 用 font-size:10px 的 方式 定义 字体 大 小 为 10 像 
素 。 此 外 ， 还 可 以 通过 medium 之 类 的 参数 定义 字体 的 大 小 ， 其 参数 含义 如 表 4-1 所 示 。 
表 4-1 设置 字体 大 小 的 参数 
参 数 说 明 
xx-small 绝对 字体 尺寸 。 根 据 对 象 字体 进行 调整 。 最 小 
x-small 
small 
medium 
large 
x-large 
xx-large 
larger 相对 字体 尺寸 。 相 对 于 父 对 象 中 字体 尺寸 进行 相对 增 大 。 使 用 成 比例 的 em 单位 计算 
smaller 相对 字体 尺寸 。 相 对 于 父 对 象 中 字体 尺寸 进行 相对 减 小 。 使 用 成 比例 的 em 单位 计算 
i 百分数 或 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 ， 不 可 为 负 值 。 其 百分比 取 值 是 基于 父 





象 中 字体 的 尺寸 


【 例 4.4】 设 置 文字 字号 (案例 文件 :ch04\4.4.html)。 


<!DOCTYPE html> 

<html> 
<head><title> 字 号 </title></head> 
<body> 

<p style="font-size:20pt"> 上 级 标记 大 小 </p> 
<p style="font-size:small"> 小 </p> 
<p style="font-size:larger"> 大 </p> 
<p style="font-size:x-small"> 小 </p> 
<p style="font-size:x-larger"> 大 </p> 
<p style="font-size:50%"> 子 标记 </p> 
<p style="font-size:25pt"> 子 标记 </p> 
</body> 

</html> 


在 正 11.0 中 浏览 ,效果 如 图 4-4 所 示 ， 可 以 看 到 网 - 


页 中 文字 被 设置 成 不 同 的 大 小 ， 其 设置 方式 采用 了 绝对 =O OE 

数值 、 关 键 字 、 百 分 比 等 形式 。 上 级 标记 大 小 i 
在 上 述 例子 中 ，font-size 字体 大 小 为 50% 时 ， 其 比 

较 对 象 是 上 一 级 标签 中 的 20pt。 同 样 ， 我 们 还 可 以 使 用 大 

inherit 值 ， 直 接 继承 上 级 标记 的 字体 大 小 。 例 如 : ， 


<p style="font-size:50pt"> 上 级 标记 </p> 
<p style="font-size: inherit "> 继承 </p> 


绝对 字体 尺寸 。 根 据 对 象 字体 进行 调整 。 较 小 
绝对 字体 尺寸 。 根 据 对 象 字体 进行 调整 。 小 
i 默认 值 。 绝 对 字体 尺寸 。 根 据 对 象 字 体 进行 调整 。 正 常 
绝对 字体 尺寸 。 根 据 对 象 字体 进行 调整 。 大 
绝对 字体 尺寸 。 根 据 对 象 字体 进行 调整 。 较 大 
- 绝对 字体 尺寸 。 根 据 对 象 字体 进行 调整 。 最 大 








子 标记 
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4.2.3 ”案例 5 一 一 设置 文字 颜色 


没有 色彩 的 网 页 是 枯燥 而 无 生机 的 ， 这 就 意味 着 一 个 优秀 的 网 页 设计 者 不 仅 要 能 够 合理 
安排 页 面 布局 ， 而 且 还 要 具有 一 定 的 色彩 视觉 和 色彩 搭配 能 力 ， 这 样 才能 够 使 网 页 更 加 精美 
也 更 具 表 现 力 ， 并 给 浏览 者 以 亲切 感 。 

通常 使 用 color 属性 来 设置 颜色 。 其 属性 值 通常 使 用 下 面 的 方式 设 定 ， 如 表 4-2 所 示 。 


表 4-2 颜色 设 定 方式 


属性 值 说 明 
color name 规定 颜色 值 为 颜色 名 称 的 颜色 (如 red) 
hex_number 规定 颜色 值 为 十 六 进 制 值 的 颜色 (如 #ff0000) 
rgb_number 规定 颜色 值 为 rgb 代码 的 颜色 (如 rgb(255,0,0)) 
inherit 规定 应 该 从 父 元 素 继承 颜色 
hsl_ number 规定 颜色 值 为 HSL 代码 的 颜色 (如 hsl(0.75%,50%))， 此 为 新 增加 的 颜色 表现 方式 
hsla_number | 规定 颜色 值 为 HSLA 代码 的 颜色 (如 hsla(120.50%,50%,1))， 此 为 新 增加 的 颜色 表现 方式 
rgba_number | 规定 颜色 值 为 RGBA 代码 的 颜色 (如 rgba(125.10.45,0.5))， 此 为 新 增加 的 颜色 表现 方式 


【 例 4.5】 设 置 文字 颜色 (案例 文件 : ch04\4.5.html)。 


<!DOCTYPE html> 

<html> 

<head><title> 字 体 颜色 </title> 

</head> 

<body> 

<hl style="color:#033"> 页 面 标题 </h1> 

<p style="color:red"> 本 段 内 容 用 于 显示 红色 。 

</p> 

<p style="color:rgb(0, 0,0) "> 此 处 使 用 rgb 方式 表示 了 一 个 黑色 文本 。</p> 

<p style="color:hsl(0,60%,30%)"> 此 处 使 用 新 增 的 HSL 函数 ， 构 建 颜色 。</p> 

<p style="color:hsla(100,50%,50%,1)"> 此 处 使 用 新 增加 的 HSLA 函数 ， 构 建 颜色 。</p> 
<p style="color:rgba(125,20,45,0.5)"> 此 处 使 用 新 增加 的 RGBA 函数 ， 构 建 颜色 。</p> 








</body> 
</html> 
EIE 10 中 预览 ， 效 果 如 图 4-5 所 示 ， 可 以 看 到 文字 以 不 同 颜色 显示 ， 并 采用 了 不 同 的 颜 
色 取 值 方式 。 
页 面 标题 
本 段 内 容 用 于 显示 红色 
此 处 使 用 rgb 方式 表示 了 一 个 黑色 文本 。 





此 处 使 用 新 增 的 HSL 函 数 ， 构 建 颜 色 。 
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424 案例 6 一 一 设置 粗 体 、 和 斜体、 下 画 线 
1. 粗 体 文本 


重要 文本 通常 以 粗 体 、 强 调 方式 或 加 强调 方式 显示 。HTML 中 的 <b> 标 记 、<em> 标 记 和 
<strong> 标 记分 别 实现 了 这 3 种 显示 方式 。 
【 例 4.6】 重 要 文本 的 显示 (案例 文件 : ch04\4.6.htmD)。 


<!DOCTYPE html> 


MSH AMHR fy 








<html> Sy 
<head> 9 ©) DNR chon.on 中- 上 | E a x 
<title> 无 标题 文档 </title> TA SSO) FSV) VƏFA IAT) WMH) 
</head> 我 是 粗 体 文字 

<body> 

<p><b> 我 是 粗 体 文字 </b> </p> REWL F 


<p><em> 我 是 强调 文字 </em> </p> 





<p><strong> 我 是 加 强调 文字 </strong></p> 我 是 加 强调 文字 

</body> 

</html> 

在 TE 11.0 中 预览 ， 效 果 如 图 4-6 所 示 ， 实 现 了 文 — SEA 
本 的 3 种 显示 方式 。 

2. 倾斜 文本 


HTML 5 中 的 < 户 标 记 实 现 了 文本 的 倾斜 显示 。 放 在 <i></ 记 之 间 的 文本 将 以 斜体 显示 。 
【 例 4.7】 设 置 倾斜 文本 (案例 文件 :ch04\4.7.html)。 


<!DOCTYPE html> 








<html> - o x 
a @ E) AMAR \chos\a7.ht O- CS seme 
<title> 倾 斜 文本 </title> 
</head> RI LZURME I 

<body> 

<i> 我 将 会 以 斜体 字 显 示 </i> 

</body> 

</html> 


在 IE 11.0 中 预览 ， 效 果 如 图 4-7 所 示 ， 其 中 文 
字 以 斜体 显示 。 
o: HTML 中 的 重要 文本 和 倾 针 文本 标记 已 经 过 时 ， 这 些 标记 都 应 该 使 用 CSS 样 
fi 区” 式 来 实现 。 随 着 后 面 学 习 的 深入 ， 读 者 会 逐渐 发 现 ， 即 使 HTML 和 CSS 实现 相同 
的 效果 ， 但 是 CSS 所 能 实现 的 控制 远 远 比 HTML 要 细致 、 精 确 。 








图 4-7 斜体 文本 的 显示 


3. 为 文本 添加 下 画 线 

HTML 5 中 的 <u> 标 记 可 以 为 文本 添加 下 画 线 ， 放 在 < u ></ u > 之 间 的 文本 以 添加 下 画 线 
的 方式 显示 。 

【 例 4.8】 为 文本 添加 下 画 线 (案例 文件 : ch04\4.8.html). 





\ 
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<!DOCTYPE html> 





<html> 
<body> 
<p> 如 果 文 本 不 是 超 链接 ， 请 尽量 不 要 <u> 对 其 使 用 下 画 线 </u>。</p> 
</body> 
</html> 
在 TE 11.0 中 预览 ， 效 果 如 图 4-8 所 示 ， 其 中 文 ey 
字 以 添加 了 下 画 线 的 方式 显示 。 ES 
Q d 请 尽量 避免 为 文本 添加 下 画 线 ， 因 如 果 文本 不 是 超 链接 ， 请 尽量 不 要 对 其 使 用 下 画 线 
注 > 一 


& ”为 用 户 会 把 它 混淆 为 一 个 超 链接 。 


4.2.5 “案例 7 一 一 设置 上 标 与 下 标 a eens 


在 HTML 中 用 <sup> 标 记 实 现 上 标 文字 ， 用 <sub> 标 记 实现 下 标 文字 。<sup> 和 <sub> 都 是 
双 标 记 ， 放 在 开始 标记 和 结束 标记 之 间 的 文本 会 分 别 以 上 标 或 下 标 形式 显示 。 
【 例 4.9】 设 置 上 标 与 下 标 ( 案 例文 件 ，ch04\4.9.htmD。 


<!DOCTYPE html> 

<html> 

<head> 

<title> 无 标题 文档 </title> 

</head> 

DRE = | o hos49m D - C =a E x 
<!- 上 标 显示 --> e a aan Say eat 
<p>c=a<sup>2</sup>t+b<sup>2</sup></p> | 


<!- 下 标 显示 --> | c=a?+b? 

<p>H<sub>2</sub>+0—-H<sub>2</sub>0</p> | 

</body> | Ho+0 一 H20 

</html> | 

在 TE 11.0 中 预览 ， 效 果 如 图 4-9 所 示 ， 分 别 实 图 4-9 上 标 和 下 标 预览 效果 
现 了 上 标 和 下 标 文本 显示 。 


42.6 ”案例 8 一 一 设置 字体 风格 


font-style 通常 用 来 定义 字体 风格 ， 即 字体 的 显示 样式 。 在 HIML 5 新 规定 中 ， 使 用 font- 
style 的 语法 格式 如 下 : 
font-style : normal | italic | oblique |inherit 
其 属性 值 有 4 个 ， 具 体 含 义 如 表 4-3 所 示 。 
表 4-3 font-style 的 属性 值 


含 义 
默认 值 。 浏 览 器 显示 一 个 标准 的 字体 样式 
浏览 器 会 显示 一 个 斜体 的 字体 样式 





属性 值 


normal 








italic 





ail 











第 
ee à 
cI 
属性 值 含义 
oblique 没有 和 斜体 变量 的 特殊 字体 ， 浏 览 器 会 显示 一 个 倾斜 的 字体 样式 a 
inherit 规定 应 该 从 父 元 素 继承 字体 样式 a 
【 例 4.10) 使 用 font-style 定义 字体 风格 (案例 文件 ，ch044.10 htmD)。 i 
<!DOCTYPE html> 
<html> 
<head><title> 字 体 风 格 </title></head> 
<body> 


<p style="font-style:italic"> 钢 禾 日 当 午 ， 汗 滴 禾 下 土 </p> 
<p style="font-style: normal">#AA HF, 汗 滴 禾 下 土 </p> 
<p style="font-style: oblique"> 钢 禾 日 当 午 ， 汗 滴 禾 下 土 </p> 
</body> 
</html> 


在 下 11.0 中 预览 ,效果 如 图 4-10 所 示 ， 可 以 看 到 文字 分 别 显示 不 同 的 样式 ， 如 斜体 。 





o x 


Y 


Or Bs 
Sn aT nT eae TC Tig 


UKHAT. FWE FA: 
WAHT, HARA FE 
DRAHT, TOR FA 








图 4-10 {A font-style 定义 字体 风格 
4.2.7 RB 9 一 一 设置 加 粗 字体 
通过 设置 字体 粗细 ， 可 以 让 文字 显示 不 同 的 外 观 。 通 过 font-weight 属性 可 以 定义 字体 的 
粗细 程度 。 其 语法 格式 如 下 。 


font-weight:100-900|bold|bolder |lighter|normal; 


font-weight 属性 有 13 个 有 效 值 ， 分 别 是 bold, bolder, lighter, normal, 100~900. WẸ 
没有 设置 该 属性 ， 则 使 用 其 默认 值 normal。 属 性 值 设置 为 100 一 900， 值 越 大 ， 加 粗 的 程度 就 
越 高 。font-weight 属性 值 的 具体 含义 如 表 4-4 所 示 。 


表 4-4 font-weight 的 属性 值 








属性 值 H ik 
bold 定义 粗 体 字体 
bolder 定义 更 粗 的 字体 ， 相 对 值 
lighter 定义 更 细 的 字体 ， 相 对 值 
normal 默认 ， 标 准 字体 
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浏览 器 默认 的 字体 粗细 是 400， 另 外 也 可 以 通过 参数 lighter 和 bolder 使 得 字体 在 原 有 基 
础 上 显得 更 细 或 更 粗 。 
【 例 4.11】 加 粗 字体 显示 (案例 文件 : ch04\4.11.htmD) 。 


<!DOCTYPE html> 
<html> 
<head><title> 加 粗 字体 </title></head> 
<body> 
<p style="font-weight :bold">AK-F LUE If (bold) </p> 
<p style="font-weight:bolder"> 万 水 千 山 总 是 情 (bolder) </p> 
<p style="font-weight:1ighter"> 万 水 千 山 总 是 情 (lighter) </p> 
<p style="font-weight:normal"> 万 水 千 山 总 是 情 (normal) </p> 
<p style="font-weight:100"> 万 水 千 山 总 是 情 (100)</p> 
<p style="font-weight:400"> 万 水 千 山 总 是 情 (400)</p> 
<p style="font-weight:900"> 万 水 千 山 总 是 情 (900)</p> 
</body> 
</html> 


Æ IE 11.0 中 浏览 ， 效 果 如 图 4-11 所 示 ， 可 以 看 到 文字 以 不 同方 式 加 粗 ， 其 中 使 用 了 关键 
字 加 粗 和 数值 加 粗 。 


|e Bc eaa 
Ben san mem mew TEM maon 


万 水 王 山 总 是 情 (bold) 
万 水 千 山 总 是 情 (bolder) 
UAT Ws EAA (Lighter) 
万 水 干 山 总 是 情 (normal) 
万 水 千 山 总 是 情 (100) 
万 水 千 山 总 是 情 (400) 

万 水 千 山 总 是 情 (900) 








图 4-11 加 粗 字体 显示 
42.8 | 10 一 一 设置 字体 复合 属性 


在 设计 网 页 时 ， 为 了 使 网 页 布局 合理 且 文本 规范 ， 对 字体 设计 需要 使 用 多 种 属性 。 例 如 
定义 字体 粗细 ， 并 定义 字体 大 小 。 但 是 ， 多 个 属性 分 别 书写 相对 比较 麻烦 ， 在 HTML 5 中 提 
供 了 font 属性 就 解决 了 这 一 问题 。 

font 属性 可 以 一 次 性 地 使 用 多 个 属性 的 属性 值 定义 文本 字体 。 其 语法 格式 如 下 : 


font:font-style font-variant font-weight font-size font-family 


font 属性 中 的 属性 排列 顺序 是 font-style, font-variant, font-weight, font-size 和 font- 
family， 各 属性 的 属性 值 之 间 使 用 空格 隔 开 。 但 是 ， 如 果 font-family 属性 要 定义 多 个 属性 值 ， 
则 需要 使 用 逗号 () 隔 开 。 

在 属性 排列 中 ，font-style、font-variant 和 font-weight 这 3 个 属性 值 是 可 以 自由 调换 的 。 
而 font-size 和 font-family 则 必须 按照 固定 的 顺序 出 现 ， 而 且 还 必须 都 出 现在 font 属性 中 。 如 
果 这 两 者 的 顺序 不 对 或 缺少 一 个 ， 那 么 整 条 样式 规则 可 能 就 会 被 忽略 。 


【 例 4.12】 设 置 字体 复合 属性 (案例 文件 : ch04\4.12 html). 


<!DOCTYPE html> 
<html> 
<head><title> 字 体 复合 属性 </title> 
<style type=text/css> 
pi 
font:normal small-caps bolder 25pt 
"Cambria", "Times New Roman", 黑体 @ E ONEROA D- ¢ | 司 3 


J xa RASO EEV BSAA IAM PMH 
</style> 


ms 学 习 HTML 5 标记 语言 ， 开 发 完美 
< y> zat 
Eee 绚丽 网 站 。 
学 习 HTML 5 标记 语言 ， 开 发 完美 绚丽 网 站 。 
</p> 
</body> 
</html> 
图 4- A 
在 TE 11.0 中 浏览 ， 效 果 如 图 4-12 所 示 ， 可 = oer 


以 看 到 文字 被 设置 成 宋体 并 加 粗 。 


4.2.9 案例 11 一 一 设置 阴影 文本 


在 显示 字体 时 ， 有 时 根据 需求 ， 需 要 给 出 文字 的 阴影 效果 ， 以 增强 网 页 整体 的 吸引 力 ， 
并 且 为 文字 阴影 添加 颜色 。 这 时 就 需要 用 到 text-shadow 属性 ， 其 语法 格式 如 下 : 


text-shadow : none | <length> none | [<shadow>, ] * <opacity> 或 none | 
<color> [, <color> ]* 


text-shadow 的 属性 值 如 表 4-5 所 示 。 
表 4-5 text-shadow 的 属性 值 











属性 值 说 明 
<color> 指定 颜色 
<length> | 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 。 可 为 负 值 。 指 定 阴影 的 水 平 延伸 距离 
pt 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 。 不 可 为 负 值 。 指 定 模 糊 效 果 的 作用 距离 。 如 果 仅 仅 


需要 模糊 效果 ， 则 将 前 两 个 length 全 部 设 定 为 0 





text-shadow 属性 有 4 个 值 ， 最 后 两 个 值 是 可 选 的 。 第 一 个 属性 值 表示 阴影 的 水 平 偏 移 ， 
可 取 正 负 值 ， 第 二 个 值 表 示 阴 影 垂 直 偏 移 ， 可 取 正 负 值 ; 第 三 个 值 表示 阴影 模糊 半径 ， 该 值 
可 选 ， 第 四 个 值 表示 阴影 颜色 值 ， 该 值 可 选 。 其 语法 格式 如 下 : 
text-shadow: 阴影 水 平 偏 移 值 (可 取 正 负 值 ) ; ”阴影 垂直 偏 移 值 (可 取 正 负 值 ) ; 阴影 模糊 值 ， 阴 影 颜 色 
【 例 4.13】 设 置 阴影 文本 (案例 文件 : ch04\4.13.htmD) 。 


<!DOCTYPE html> 
<html> 
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<head><title> 阴 影 文本 </title> 


</head> Oi ERE 
<body> ARN RSD SEV) SARN IAM emo 


-0 xX 


<p align=center style="text— 
shadow:0.lem 3px 6px blue; font— 


size:80px;"> 春蚕 到 死 丝 方 尽 </br> 

P LEE UESN 

</bo 

woe he KE DCE er 

在 TE 11.0 中 浏览 ， 效 果 如 图 4-13 所 示 ， 可 $ 
以 看 到 文字 居中 并 带 有 阴影 显示 。 

通过 上 述 实例 ， 可 以 看 出 阴影 偏 移 由 两 个 
length 值 指定 到 文本 的 距离 。 第 一 个 长 度 值 指定 到 文本 右边 的 水 平 距离 ， 负 值 会 把 阴影 放置 在 


文本 左边 。 第 二 个 长 度 值 指定 到 文本 下 边 的 垂直 距离 ， 负 值 会 把 阴影 放置 在 文本 上 方 。 在 阴 
影 偏 移 之 后 ， 可 以 指定 一 个 模糊 半径 。 


oF 模糊 半径 是 一 个 长 度 值 ， 它 指定 了 模糊 效果 的 范围 ， 但 如 何 计算 效果 的 具体 算 


用 站 ”法 ， 并 没有 指定 。 在 阴影 效果 的 长 度 值 之 前 或 之 后 ， 还 可 以 指定 一 个 颜色 值 ， 颜 色 
值 会 被 用 作 阴影 效果 的 基础 。 如 果 没有 指定 颜色 ， 那 么 将 使 用 color 属性 值 来 替代 。 





413 ”文字 居中 并 阴影 显示 


4.2.10 ”案例 12 一 一 控制 换行 


当 在 一 个 指定 区 域 显示 一 整 行文 字 时 ， 如 果 文 字 在 一 行 显示 不 完 时 ， 则 需要 进行 换行 。 
如 果 不 进行 换行 ， 则 会 超出 指定 区 域 范围 ， 此 时 我 们 可 以 采用 新 增加 的 word-wrap 文本 样 
式 ， 来 控制 文本 换行 。 

word-wrap 的 语法 格式 如 下 : 


word-wrap : normal | break-word 
其 属性 值 含义 比较 简单 ， 如 表 4-6 所 示 。 
表 4-6 word-wrap 的 属性 值 


属性 值 说 明 
normal 控制 连续 文本 换行 


break-word 内 容 将 在 边界 内 换行 。 如 果 需 要 ， 词 内 换行 (word-break) 也 会 发 生 


【 例 4.14】 控 制 文本 换行 (案例 文件 : ch04\4.14.htmD) 。 


<!DOCTYPE html> 
<html> 
<head><title> 控 制 换行 </title></head> 
<body> 
<style type="text/css"> 
div{ width:300px;word-wrap:break-word;border:lpx solid #999999;} 
</style> 


<qdiv> 本 文 测试 控制 换行 功能 ， 可 以 使 文本 在 指定 框架 中 换行 显示 内 容 。</div><br> 





<div>wordwrapbreakwordwordwrapbreakwordwordwrapbreakwordwordwrapbreakword</ 











div><br> 
<div>This is all English,This is all | Tr m 
English,This is all English,This is all pr Rea E f 
E E EREE RTE 
y 证 框架 中 换行 显示 内 容 。 
</html> 








wordwrapbreakwordwordwrapbreakwordwor 


HIE 11.0 中 浏览 ， 效 果 如 图 4-14 所 示 ， 可 以 看 kiwrapbreakwordwordwrapbreakword 
到 文字 在 指定 位 置 被 控制 换行 。 [ihis is all English, This is all 

可 以 看 出 ，word-wrap 属性 可 以 控制 换行 ， 当 属 Biei ATS 
性 取 值 break-word 时 ， 将 强制 换行 ， 中 文 文本 没有 
任何 问题 ， 英 文 语句 也 没有 任何 问题 。 但 是 对 于 长 图 4-14 ”控制 文本 换行 
串 的 英文 则 不 起 作用 ， 也 就 是 说 ，break-word 属性 
是 控制 是 否 断 词 ， 而 不 是 断 字符 。 


43 设置 段落 格式 


在 网 页 中 如 果 要 把 文字 合理 地 显示 出 来 ， 离 不 开 段落 标记 的 使 用 。 对 网 页 中 文字 段落 进 
行 排版 ， 并 不 像 文本 编辑 软件 Word 那样 可 以 定义 许多 模式 来 安排 文字 的 位 置 。 在 网 页 中 要 
让 某 一 段 文字 放 在 特定 的 地 方 是 通过 HTML 标记 来 完成 的 。 


4.3.1 案例 13 一 一 设置 段落 标记 


段落 标记 是 双 标 记 ， 即 <p></p>， 在 <p> 开 始 标记 和 </p> 结 束 标记 之 间 的 内 容 形 成 一 个 段 
落 。 如 果 省 略 结束 标记 ， 从 <p> 标 记 开始 ， 直 到 遇见 下 一 个 段落 标记 之 前 的 文本 ， 都 在 一 个 段 
落 内 。 段 落 标记 中 的 p 是 英文 单词 paragraph 即 “ 段 落 ” 的 首 字母 ， 用 来 定义 网 页 中 的 一 段 文 
本 ， 文 本 在 一 个 段落 中 会 自动 换行 

【 例 4.1S】 设 置 段落 标记 (案例 文件 : ch04\4.15.htmD) 。 


<!DOCTYPE html> 
<html> 
<head> 
<title> 段 落 标记 的 使 用 </title> 
</head> 
<body> 

<p>HTML 5, CSS3 应 用 教程 之 FR DIV 说 Bye! Bye!</p> 
<p>Web 设计 师 可 以 使 用 HTML4 和 css2 .1 完成 一 些 很 酷 的 东西 。 我 们 可 以 在 不 使 用 陈旧 的 基于 
table 布局 的 基础 上 完成 文档 逻辑 结构 并 创建 内 容 丰 富 的 网 站 。 我 们 可 以 在 不 使 用 内 联 <font> 和 
<br> 标 签 的 基础 上 对 网 站 添加 漂亮 而 细腻 的 风格 样式 。 事 实 上 ， 我 们 目前 的 设计 能 力 已 经 让 我 们 远离 
了 那个 可 怕 的 浏览 器 战争 时 代 、 专 有 协议 和 那些 充满 内 动 、 滚 动 和 闪烁 的 丑陋 网 页 。 


<p> 


<p> 
虽然 我 们 现在 已 经 普遍 使 用 了 HTML4 和 css2 .1， 但 是 我 们 还 可 以 做 得 更 好 ! 我 们 可 以 重组 我 们 代码 
的 结构 并 能 让 我 们 的 页 面 代码 更 富有 语义 化 特性 。 我 们 可 以 缩减 带 给 页 面 美丽 外 观 样式 代码 量 并 让 它们 
有 更 高 的 可 扩展 性 。 现 在 ，HTML 5 和 css3 正 跃 跃 欲 试 地 等 待 大 家 ， 下 面 让 我 们 来 看 看 它们 是 否 真 的 
能 让 我 们 的 设计 提升 到 下 一 个 高 度 吧 … 


</p> 


<p> 
曾经 ， 设 计 师 们 经 常会 更 频繁 使 用 基于 table 的 没有 任何 语义 的 布局 。 不 过 最 终 还 是 要 感谢 像 
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Jeffrey Zeldman Ml Eric Meyer 这 样 的 思想 革新 者 ， 聪 明 的 设计 师 们 慢 慢 地 接受 了 相对 更 语义 化 
的 <div> 布 局 蔡 代 了 table 布局 ， 并 且 开 始 调用 外 部 样式 表 。 但 不 幸 的 是 ， 复 杂 的 网 页 设计 需要 大 量 
不 同 的 标签 结构 代码 ， 我 们 把 它 叫 作 “<aiv>-soup” 综合 征 。 

</p> 

Soave 

</html> 


在 下 11.0 中 预览 ， 效 果 如 图 4-15 所 示 ，<P> 标 记 将 文本 分 成 4 个 段落 。 
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图 4-15 段落 标记 的 使 用 
43.2 ”案例 14 一 一 设置 换行 标记 


换行 标记 <br> 是 一 个 单 标记 ， 它 没有 结束 标记 ， 是 英文 单词 break 的 缩写 ， 作 用 是 将 文字 
在 一 个 段 内 强制 换行 。 一 个 <br> 标 记 代 表 一 个 换行 ， 连 续 的 多 个 标记 可 以 实现 多 次 换行 。 使 
用 换行 标记 时 ， 在 需要 换行 的 位 置 添加 <br> 标 记 即 可 。 例 如 ， 下 面 的 代码 实现 了 对 文本 的 强 
制 换行 。 

【 例 4.16】 设 置换 行 标记 (案例 文件 ，ch04\4.16.html)。 


<!DOCTYPE html> 
<html> 
<head> 
<title> 文 本 段 换行 </title> 
</head> 
<body> 
本 节目 标 <br /> 
网 页 中 的 文字 是 如 何 设置 的 <br/> 
如 何在 Dreamweaver 中 处 理 文字 <br/> @ =< -ig 
如 何 对 文本 进行 格式 化 (css) <br /> posame- Bsmt OS Oe 
熟悉 使 用 Dreamweaver 进行 样式 表 的 创建 与 应 用 ER 
</body> 网 页 中 的 文字 是 如 何 设置 的 
</html> 如 何在 Dreamweaver 中 处 理 文字 
如 何 对 文本 进行 格式 化 《CSS》 


虽然 在 HTML 源 代码 中 ， 主体 部 分 的 内 容 在 排 熟悉 使 用 Dreamweaver 进 行 样式 表 的 创建 与 应 用 
版 上 没有 换行 ， 但 是 增加 <br> 标 记 后 ， 在 正 11.0 中 
预览 ， 效 果 如 图 4-16 所 示 ， 实 现 了 换行 效果 。 








4-16 ”换行 标记 的 使 用 


44 设置 网 页 水 平 线 


使 用 <hr> 标 签 可 以 在 HTML 页 面 中 创建 一 条 水 平 线 ， 并 设置 水 平 线 的 高 度 、 宽 度 、 颜 
色 、 对 齐 方式 等 样式 。 


4.4.1 案例 15 一 一 添加 水 平 线 


在 HTML 中 ，<hr> 标 签 没有 结束 标签 。 
【 例 4.17】 添 加 水 平 线 (案例 文件 : ch04\4.17.html)。 


<!DOCTYPE html> 





wanes mrs 








<html> BE EM] P= o| Sopa honey...» 
ZA) WOE BBM GRAA IRM WEH È 
<body> 
2 ， 标 签 定义 水 平 线 4 
<p>hr 标签 定义 水 平 线 </p> hr 标签 定义 水 平 线 NS 
<hr /> NN 


<p> 这 是 一 个 段落 。</p> 这 是 一 个 段落 。 


<hr /> - 、 
<p> 这 是 一 个 段落 。</p> 这 是 一 个 段 沙 。 

<hr /> i - 

<p> 这 是 一 个 段落 。</p> 这 是 一 个 段落 。 

</body> 

</html> 图 4.17 meee 

在 下 11.0 中 预览 ， 效 果 如 图 4-17 所 示 ， 在 其 


中 可 以 看 到 添加 的 水 平 线 。 


44.2 ”案例 16 一 一 设置 水 平 线 的 宽度 与 高 度 


使 用 size 与 width 属性 可 以 设置 水 平 线 的 宽度 与 高 度 。 其 中 ，width 属性 规定 水 平 线 的 宽 
度 ， 以 像素 计 或 百分比 计 ，size 属性 规定 水 平 线 的 高 度 ， 以 像素 计 。 








ma? 
ji ik HTML 5 已 经 不 再 支持 <hr> 标 记 的 size 与 width 属性 。 
意 


【 例 4.18】 设 置 水 平 线 的 宽度 与 高 度 (案例 文件 : ch04\4.18.htmD 。 


<!DOCTYPE html> 
<html> 

<body> 

<p> 普 通 的 水 平 线 </p> 
<hr [S 


<p> 高 度 为 50 像素 的 水 平 线 </p> 
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<hr size="50" /> 普通 的 水 平 线 
<p> 宽 度 为 50% 的 水 平 线 </p> 

<hr width="30%" /> 高 度 为 50 像 素 的 水 平 线 
</body> 

</html> | 


在 TE 11.0 中 预览 ， 效 果 如 图 4-18 所 示 ， 其 中 一 条 Pare 
水 平 线 的 高 度 为 50 像素 ， 一 条 水 平 线 的 宽度 为 50%。 








443 RB 17 一 一 设置 水 平 线 的 颜色 图 4-18 设置 水 平 线 的 宽度 与 高 度 
使 用 color 属性 可 以 设置 水 平 线 的 颜色 。 下 面 以 给 网 页 添加 一 个 红色 水 平 线 为 例 ， 来 介绍 
设置 水 平 线 颜色 的 方法 。 
[A 4.19 】 设 置 水 平 线 的 颜色 (案例 文件 : 四 Geassalaaaaanex 站 
Peres ei aera ACT 





下 面 是 一 条 红色 水 平 线 
<!DOCTYPE html> 


<html> 

<body> 

<p> 下 面 是 一 条 红色 水 平 线 </p> 
<hr color="red" /> 
</body> 


</html> 图 4-19 设置 水 平 线 的 颜色 
EIE 11.0 中 预览 ， 效 果 如 图 4-19 所 示 ， 可 以 看 出 网 
页 中 显示 的 水 平 线 是 红色 。 


4.4.4 案例 18 一 一 设置 水 平 线 的 对 齐 方式 


align 属性 规定 水 平 线 的 水 平 对 齐 方式 ， 包 括 3 种 对 齐 方式 ， 分 别 是 : left( 左 对 齐 )、 
right( 右 对 齐 )、center( 居 中 对 齐 )。 需 要 提示 用 户 的 是 除非 width 属性 设置 为 小 于 100%， 和 否则 





align 属性 不 会 有 任何 效果 。 
ji i HTML 5 已 经 不 再 支持 <hr> 标 记 的 align 属性 。 


【 例 4.20】 设 置 水 平 线 的 对 齐 方 式 (案例 文件 : ch04\4.20.html)。 


<!DOCTYPE html> 


=o x 
aan @ E oasa O - 0 || S onsem ehonazo.. x | 
<body> 2AA S66 SEV wesw TAD BH) 





<p> 设 置 水 平 线 的 对 齐 方式 </p> 设置 水 平 线 的 对 齐 方式 
<hr align="center" width="50%" /> ——— 
<hr align="left" width="50%" /> 

<hr align="right" width="50%" /> 

</body> 

</html> 


在 正 11.0 中 预览 ， 效 果 如 图 4-20 所 示 ， 可 以 看 到 图 4-20 设置 水 平 线 的 对 齐 方式 





网 页 中 水 平 线 的 对 齐 方式 。 
4.4.5 “案例 19 一 一 去 掉 水 平 线 阴影 2 
noshade 属性 规定 水 平 线 的 颜色 呈现 为 纯色 ， 而 不 是 有 阴影 的 颜色 。 下 面 介绍 去 掉 水 平 线 m 
阴影 的 方法 。 * 
i HTML 5 已 经 不 再 支持 <hr> 标 记 的 noshade 属性 。 


【 例 4.21】 去 掉 水 平 线 阴影 (案例 文件 : ch04\4.21.htmD)。 


<!DOCTYPE html> 














<html> | F C\Weers\aderinatron D ~ © EEEE A | 
<body> ZEN REO SEV SRRA IAM NDH 
<p> 带 阴影 的 水 平 线 (默认 ) </p> 带 阴影 的 水 平 线 CRUD 
<hr /> 
Pe A 不 带 阴 影 的 水 平 线 
<hr noshade="noshade" /> 
</body> 
</html> 
Z 图 4-21 去 掉 水 平 线 的 阴影 
在 TE 11.0 中 预览 ， 效果 如 图 4-21 所 示 ， 可 
以 看 到 两 种 水 平 线 的 区 别 。 





45 综合 案例 一 一 成 才 教育 网 文本 设计 


本 章 讲述 了 网 页 组 成 元 素 中 最 常用 的 文本 。 本 实例 将 综合 运用 网 页 文本 的 设计 方法 ， 制 
作成 才 教育 网 的 文本 页 面 。 其 具体 操作 步骤 如 下 。 
在 Dreamweaver CC 中 新 建 HTML 文档 ， 并 修改 成 HTML 5 标准 。 代 码 如 下 : 


<!DOCTYPE html> 

<html > 

<head> 

<meta charset="utf-8" /> 
<title> 成 才 教 育 网 </title> 
</head> 

<body> 

</body> 

</html> 


ESTP 在 body 部 分 增加 如 下 HTML 代码 。 保 存 页 面 。 


<p><h2> 成 才 教 育 </h2></p> 

<p> 成 才 教 育成 立 于 2003 年 ， 是 一 家 专业 致力 于 学 生 学 习 能 力 开发 和 培养 、 学 习 社区 建设 、 课 外 辅导 
服务 、 家 庭 教育 研究 的 新 型 综合 教育 服务 机 构 。 自 成 立 起 ， 一 直 专 业 致 力 于 初 高 中 学 生 的 课外 辅导 和 学 
习 能 力 的 培养 。</p> 

<h3> 教 学 模式 </h3> 


HTML 5 网 页 设计 
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<p> 为 学 生 量 身 定制 最 佳 的 学 习 方 案 ， 改 善 学 习 方 法 ， 充 分 挖掘 学 生 们 的 智力 潜能 ， 激 发 学 习 兴 趣 ， 培 养 
学 生 的 自学 能 力 ， 辅 导 老师 (以 一 线 重点 在 校 教师 为 主 ) 对 学 生 设 计 适合 学 生 的 辅导 教案 与 作业 习题 。</p> 
<h3> 教 学 特色 </h3> 

分 析 学 科 不 足 制 订 辅 导 计划 ; <br /> 

特级 名 师 高 考 难点 点 睛 ; <br /> 

专人 陪读 随时 解除 疑难 ; <br /> 

专业 学 科 导 师 一 对 一 面授 学 科 知识 、 解 题 技巧 、 学 习 方式 。 


使 用 TE 打开 文件 预览 ， 效 果 如 图 4-22 所 示 。 
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成 才 教育 
成 才 教 育成 立 于 2003 年 ， 是 一 家 专业 致 为 于 学 生 学 习 能 力 开发 和 培养 、 学 习 社区 建设 、 课 外 
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4.6 高 手 解 惑 


疑问 1: 换行 标记 和 段落 标记 的 区 别 ? 

答 : 换行 标记 是 单 标记 ， 不 能 写 结束 标记 。 段 落 标记 是 双 标 记 ， 可 以 省 略 结束 标记 也 可 
以 不 省 略 。 在 默认 情况 下 ， 段 落 之 间 的 距离 和 段落 内 部 的 行 间距 是 不 同 的 ， 段 落 间距 比较 
大 ， 行 间距 比较 小 。HTML 无 法 调整 段落 间距 和 行 间距 ， 如 果 和 希望 调整 它们 ， 就 必须 使 用 
CSS。 在 Dreamweaver CC 的 设计 视图 下 ， 按 Enter 键 可 以 快速 换 段 ， 按 Shift+Enter 组 合 键 可 
以 快速 换行 。 

疑问 2: HTML 文档 页 面 上 边 总 是 留 出 一 段 空白 ? 

%: body 默认 有 个 上 边 距 ， 设 置 这 个 值 的 属性 topmargin=0 就 可 以 了 。 有 时 还 需要 设置 
leftmargin、rightmargin 和 bottommargin 属性 值 。 


第 5 章 
设计 网 页 列表 
与 段落 


网 页 列表 与 段落 是 网 页 中 最 主要 也 是 最 常用 的 元 素 。 其 中 ， 网 页 列表 可 以 有 序 
地 编排 一 些 信 息 资源 ， 使 其 结构 化 和 条 理化 ， 并 以 列表 的 样式 显示 出 来 ， 以 便 浏 览 
者 能 更 加 快捷 地 获得 相应 信息 。 网 页 中 用 来 表达 同一 个 意思 的 多 个 文字 组 合 ， 可 以 
称 为 段落 。 段 落 是 文章 的 基本 单位 ， 同 样 也 是 网 页 的 基本 单位 。 


重点 案例 效果 
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5.1 网 页 文字 列表 的 设计 


HTML 网 页 中 的 文字 列表 如 同文 字 编 辑 软 件 Word 中 的 项 目 符号 和 自动 编号 。 下 面 介绍 
如 何在 网 页 中 设计 文字 列表 。 


5.1.1 案例 1 一 一 建立 无 序列 表 <ul> 


无 序列 表 相 当 于 Word 中 的 项 目 符号 。 无 序列 表 的 项 目 排列 没有 顺序 ， 只 以 符号 作为 分 
项 标识 。 无 序列 表 使 用 一 对 标记 <ul></ul>， 其 中 每 一 个 列表 项 使 用 <li></li>， 其 结构 如 下 : 


<ul> 
<1i> 无 序列 表 项 </1i> 
<1i> 无 序列 表 项 </1i> 
<1i> 无 序列 表 项 </1i> 
<1i> 无 序列 表 项 </1i> 


</ul> 


在 无 序列 表 结 构 中 ， 使 用 <ul></ul> 标 记 表 示 这 一 个 无 序列 表 的 开始 和 结束 ;<l> 则 表示 
一 个 列表 项 的 开始 。 在 一 个 无 序列 表 中 可 以 包含 多 个 列表 项 ， 并 且 <li> 可 以 省 略 结束 标记 。 下 
面 的 实例 使 用 无 序列 表 实 现 文本 的 排列 显示 。 

【 例 5.1】 建 立 无 序列 表 ( 案 例文 件 : ch05\5.1.html)。 


<!DOCTYPE html> 
<html> 
<head> 
<title> 婴 套 无 序列 表 的 使 用 </title> 
</head> 
<body> 
<h1> 网 站 建设 流程 </h1> 
<ul> 
<1i> 项 目 需 求 </1i> 
<li> 系统 分 析 
<ul> 
<1i> 网 站 的 定位 </1i> 
<1i> 内 容 收 集 </1i> 
<1i> 栏 目 规划 </1i> 
<1i> 网 站 目录 结构 设计 </1i> 
<1i> 网 站 标志 设计 </1i> 
<li> 网 站 风格 设计 </1i> 
<li> 网 站 导航 系统 设计 </1i> 
</ul> 
</li> 
<li> 伪 网 页 草图 
<ul> 
<li> 制作 网 页 草图 </1i> 
<1i> 将 草图 转换 为 网 页 </1i> 
</ul> 
</li> 


<li> 站 点 建设 </1i> 





<1i> 网 页 布局 </1i> = 
<1i> 网 站 测试 </1i> Cem EL 
<li> 站 点 的 发 布 与 站 点 管理 </li> 、 =e 
</ul> 网 站 建设 流程 
</body> + RAR 
</html> ` A anei 
:内容 收集 






在 正 11.0 中 预览 ， 效 果 如 图 5-1 Pras. R, 无 
序列 表 项 中 ， 可 以 棋 套 一 个 列表 。 例 如 ， 代 码 中 的 DAMAREN 
“系统 分 析 ” 列 表 项 和 “ 伪 网 页 草图 ”列表 项 中 都 有 下 | Mae 
级 列表 ， 因 此 在 这 对 <li></li> 标 记 间 又 增加 了 一 对 waa ASAN 
<ul></ul> 标 记 。 : 


weit aos A 


T RRI a sere 
5.1.2 案例 2 一 一 建立 有 序列 表 <ol> 图 5-1 无 序列 表 


有 序列 表 类 似 于 Word 中 的 自动 编号 功能 。 有 序列 表 的 使 用 方法 和 无 序列 表 的 使 用 方法 
基本 相同 。 它 使 用 标记 <ol></ol>， 每 一 个 列表 项 前 使 用 <li></li>。 每 个 项 目 都 有 前 后 顺序 之 
分 ， 多数 用 数字 表示 ， 其 结构 如 下 : 


<ol> 
<1i> 1 Gi</1i> 
<1i>3 2 项 </1i> 
<1i> 3 项 </1i> 
</ol> 


下 面 的 实例 使 用 有 序列 表 实 现 文本 的 排列 显示 。 
【 例 5.2】 建 立 有 序列 表 ( 案 例文 件 : ch05\5.2.html)。 


<!DOCTYPE html> 























<html> 
<head> 
<title> 有 序列 表 的 使 用 </title> 
</head> 
<body> 
<h1> 本 讲 目 标 </h1> 
<ol> 
<1i> 网 页 的 相关 概念 </li> (OO 
<li> 网 页 与 HTML</1i> 240 ASO REO URED IAM a 
<li> Web 标准 (结构 、 表 现 、 行 为) </1i> 
<li> 网 页 设计 与 开发 的 过 程 </li> i 水 
<1i> 与 设计 相关 的 技术 因素 </1i> 本 讲 目标 
<li> HTML 简介 </li> 1 网 页 的 相关 概念 
SNe S ORAE CA, Zh 1A) 
eb 标准 、 表 现 、 
</body> 4. 网 页 设计 与 开发 的 过 程 
</html> 5 与 设计 相关 的 技术 因素 
6. HTML fj fr 
在 正 11.0 中 预览 ， 效 果 如 图 5-2 所 示 。 可 以 
看 到 新 添加 的 有 序列 表 。 图 5-2 有 序列 表 
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5.1.3 ”案例 3 一 一 建立 不 同类 型 的 无 序列 表 


通过 使 用 多 个 <ul> 标 签 ， 可 以 建立 不 同类 型 的 无 序列 表 。 
【 例 $.3】 建 立 不 同类 型 的 无 序列 表 ( 案 例文 件 : chO5\5.3.html). 


<!DOCTYPE html> 
<html> 

<body> 

<h4>Disc 项 目 符号 列表 : </h4> 
<ul type="disc"> 
<1i> 苹 果 </1i> 
<1i>@R</1i> 
<1i> 柠 机 </1i> 
<1i> 桔 子 </1i> 





</ul> 5 
ET 了 FT 


<h4>Circle 项 目 符号 列表 : </h4> ASS ae eo 
<ul type="circle"> : 

<1i> 苹 果 </1i> Disc 项 目 符号 列表 : 
<1i>BR</1i> -R 

<1i> 柠 檬 </1i> ak 

<li> f </li> RT 
</ul> 

<h4>square 项 目 符号 列表 : </h4> Circle 项 目 符号 列表 : 
<ul type="square"> 
<1i> 苹 果 </1i> 
<1i>#R</1i> 
<1i> 柠 榜 </1i> 

<1i> 桔 子 </1i> Square 项 目 符号 列表 : 
</ul> 
</body> 
</html> 














在 TE 11.0 中 预览 ， 效 果 如 图 5-3 所 示 。 可 
以 看 到 ， 网 页 中 插入 了 3 种 不 同类 型 的 无 序 图 5-3 不 同类 型 的 无 序列 表 
列表 。 


5.1.4 ”案例 4 一 一 建立 不 同类 型 的 有 序列 表 


通过 使 用 多 个 <ol> 标 签 ， 可 以 建立 不 同类 型 的 有 序列 表 。 
【 例 5.4】 建 立 不 同类 型 的 有 序列 表 ( 案 例文 件 ，ch05\5.4.html)。 


<!DOCTYPE html> 
<html> 
<body> 
<h4> 数 字 列 表 : </h4> 
<ol> 
<1i> 苹 果 </1i> 
<li> ẸÆ</li> 
<1i> 柠 榜 </1i> 
<1i> 桔 子 </1i> 
</ol> 


<h4> 字 母 列 表 : </h4> 


= 
第 
a 
<ol type="A"> OT I re 全 让 全 人 = 
<1i> 苹 果 </1i> EA) sem mem eama Iam seo ail za 
<li> <li> 数字 列表 : i 
1i> 香 菩 </1i À k 
<1i>tT#R</1i> 网 
<1i> 桔 子 </1i> 页 
</ol> 列 
</body> £ 
</html> 段 
落 


在 TE 11.0 中 预览 ， 效 果 如 图 5-4 所 示 。 可 以 看 
到 ， 网 页 中 建立 了 两 种 不 同类 型 的 有 序列 表 。 


5.1.5 ”案例 5 一 一 从 套 列表 图 5-4 不 同类 型 的 有 序列 表 


嵌 套 列表 是 网 页 中 常用 的 元 素 ， 使 用 <ul> 标 签 可 以 制作 网 页 中 的 嵌 套 列表 。 
【 例 5.5】 建 立 网 页 嵌 套 列表 (案例 文件 :ch05\5.5.html)。 


<!DOCTYPE html> 
<html> 











<body> 
<h4> 一 个 嵌 套 列表 : </h4> 
<ul> 
<1i> 咖 啡 </1i> 
<1i> 茶 
<ul> 
<1i> 红 茶 </1i> 
<1i> 绿 茶 
<ul> = 
<1i> 中 国共 </1i> | CEEE = | 三 Peer 
<1i> 非 洲 茶 </1i> 2an REE) BBV casa IAD wo) 
fale Aiea: 
</li> 
</ul> 。 咖 啡 
</1i> “ 茶 . 
<1i> 牛 奶 </1i> 
</ul> 。 中 国共 
</body> 。 非洲 茶 
</html> * 和 牛奶 


在 TE 11.0 中 预览 ， 效 果 如 图 5-5 所 示 。 可 以 看 
到 ， 网 页 中 插入 了 一 个 嵌 套 列表 。 


5.1.6 ”案例 6 一 一 自 定义 列表 <dl> 


在 HTML 5 中 还 可 以 自 定义 列表 ， 所 用 的 标签 是 <dl>。 
【 例 $.6】 设 计 自 定义 网 页 列表 (案例 文件 : ch05\5.6.html)。 


<!DOCTYPE html> 
<html> 


<body> 
<h2> 一 个 定义 列表 : </h2> 














5-5 ”网 页 嵌 套 列表 
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a | ox 
ee PORTEE CoE 
daea 运 子 设备 .</ad: 
cat RB /at ang 一 个 定义 列表 : 
Saas DUES REAR 息 的 装置 .</ada> ee 
</di> 是 一 种 能 够 按照 程序 运行 的 电子 设备 ……… 
Ye 以 视 觉 方式 显示 信息 的 装置 ,,，. 
</html> 
Æ IE 11.0 中 预览 ,效果 如 图 5-6 所 示 。 可 以 看 到 ， 网 页 mee macs 
中 建立 了 一 个 自 定义 列表 。 义 列表 


5.2 网 页 段落 格式 的 设计 


段落 的 放置 与 效果 的 显示 会 直接 影响 到 页 面 的 布局 及 风格 。 在 HIML 5 中 有 关 文 本 段落 
的 格式 设置 需要 靠 CSS 样式 来 实现 。CSS 样式 表 提供 了 文本 属性 来 实现 对 页 面 中 段落 文本 的 
控制 。 


5.2.1 案例 7 一 一 设计 单词 间隔 word-spacing 


单词 之 间 的 间隔 如 果 设 置 合 理 ， 一 是 会 给 整个 网 页 布局 节省 空间 ;， 二 是 可 以 给 入 赏 心 悦 
目的 感觉 ， 提 高 阅读 效果 ， 在 CSS 中 ， 可 以 使 用 word-spacing 直接 定义 指定 区 域 或 者 段落 中 
字符 之 间 的 间隔 。 

word-spacing 属性 用 于 设 定 词 与 词 之 间 的 间距 ， 即 增加 或 者 减少 词 与 词 之 间 的 间隔 。 其 语 
法 格式 如 下 : 


word-spacing : normal | length 
其 中 属性 值 normal 和 length 的 含义 如 表 5-1 所 示 。 
表 5-1 word-spacing 的 属性 值 





默认 ， 定 义 单词 之 间 的 标准 间隔 
定义 单词 之 间 的 固定 宽度 ， 可 以 接受 正 值 或 负 值 





【 例 $.7】 定 义 段落 中 单词 的 间隔 (案例 文件 : ch05\5.7.htmD)。 


<!DOCTYPE html> 

<html> 

<head> 

<title> 单 词 间隔 </title> 

</head> 

<body> 

<p style="word-spacing:normal">Welcome to Beijing!</p> 
<p style="word-spacing:10px">Welcome to Beijing!</p> 
<p style="word-spacing:10px"> 北 京 欢迎 您 1</p> 

</body> 

</html> 


使 用 IE 11.0 打开 文件 预览 ， 效 果 如 图 5-7 所 示 。 可 以 看 到 ， 段 落 中 单词 以 不 同 间隔 显示 。 


QO Sarasa ae 
XAA S80 EEV sea) IEM eon 





Welcome to Beijing! 
Welcome to Beijing! 


北京 欢迎 您 ! 





图 5-7 定义 单词 的 间隔 


ar 从 上 面 的 显示 结果 可 以 看 出 ，word-spacing 属性 不 能 用 于 设 定 文字 之 间 的 
\ 间隔 。 


5.2.2 案例 8 一 一 设计 字符 间隔 letter-spacing 


在 一 个 网 页 中 ， 还 可 能 涉及 多 个 文本 字符 ， 将 文本 字符 之 间 的 间距 ， 设 置 得 和 词 间隔 保持 一 
致 ， 进 而 保持 页 面 的 整体 性 ， 是 网 页 设计 者 必须 完成 的 。 词 与 词 之 间 可 以 通过 word-spacing 
进行 设置 ， 那 么 字符 之 间 使 用 什么 设置 呢 ? 

通过 letter-spacing 样式 可 以 设置 文本 字符 之 间 的 距离 。 即 在 文本 字符 之 间 插 入 多 少 空 
间 ， 这 里 允许 使 用 负 值 ， 这 会 让 字母 之 间 更 加 紧凑 。 其 语法 格式 如 下 : 


letter-spacing : normal | length 
letter-spacing 的 属性 值 含义 如 表 5-2 所 示 。 
表 5-2 letter-spacing 的 属性 值 


默认 间隔 ， 即 以 字符 之 间 的 标准 间隔 显示 
由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 ， 允 许 为 负 值 





【 例 $.8】 定 义 段 落 中 字符 的 间隔 (案例 文件 : ch0S\5.8.html). 


<!DOCTYPE html> 

<html> 

<head> 

<title> 字 符 间隔 </title> 

</head> 

<body> 

<p style="letter-spacing:normal">Welcome to Beijing!</p> 
<p style="letter-spacing:10px">Welcome to Beijing!</p> 
<p style="letter-spacing: 2ex"> 设 置 字符 间距 为 2ex</p> 

<p style="letter-spacing:-0. 5ex"> 设 置 字符 间距 为 -0. Sex</p> 
<p style="letter-spacing:2em"> 设 置 字符 间距 为 2em</p> 
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使 用 TE 11.0 打开 文件 预览 ， 效 果 如 图 5-8 所 示 ， 可 以 看 到 ， 文 字 间 距 以 不 同 大 小 显示 。 
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图 5-8 定义 字符 的 间隔 


arm 从 上 述 代码 中 可 以 看 出 ， 通 过 letter-spacing 定义 了 多 个 字 间 距 的 效果 。 特 别 
A 注意 ， 当 设置 的 字 间 距 是 -0.Sex 时 ， 文 字 就 会 拥挤 到 一 块 。 


5.2.3 ”案例 9 一 一 设计 文字 修饰 text-decoration 


在 网 页 文本 编辑 中 有 的 文字 需要 突出 重点 ， 即 告诉 读者 这 段 文本 的 重要 作用 ， 这 时 往往 会 给 
其 增加 下 画 线 ， 或 者 增加 上 画 线 和 删除 线 效 果 ， 从 而 吸引 读者 的 眼球 。 可 以 使 用 text- 
decoration 文本 修饰 属性 为 页 面 提供 多 种 文本 的 修饰 效果 ， 如 下 画 线 、 删 除 线 、 闪 烁 等 。 其 语 
法 格式 如 下 : 


text-decoration:none||underline||blink||overline||line-through 


text-decoration 的 属性 值 含义 如 表 5-3 所 示 。 
表 5-3 text-decoration 的 属性 值 





属性 值 H g 
none 默认 值 ， 对 文本 不 进行 任何 修饰 
underline FEHR 
overline 上 画 线 
line-through 删除 线 
blink 闪烁 





【 例 5.9】 设 计 段 落 中 文字 的 修饰 效果 (案例 文件 : ch05\5.9.html)。 


<!DOCTYPE html> 

<html> 

<head> 

<title> 文 字 修饰 </title> 

</head> 

<body> 

<p style="text-decoration:none"> 和 您 您 中 华 五 千年 !</p> 

<p style="text-decoration:underline"> 和 您 您 中 华 五 千年 !</p> 
<p style="text-decoration:overline"> 和 悠悠 中 华 五 千年 !</p> 


<p style="text-decoration:1line-through"> 悠 悠 中 华 五 千年 !</p> 
<p style="text-decoration:blink"> 悠 悠 中 华 五 千年 !</p> 








</body> 
</html> 
使 用 TE 11.0 打开 文件 预览 ， 效 果 如 图 5-9 所 示 , 可 以 看 o aaa 
到 ， 段 落 中 出 现 了 下 画 线 、 上 画 线 、 删 除 线 等 。 BERPITHI 
= 这 里 需要 注意 的 是 : blink 闪烁 效果 ome 
只 有 Mozilla 和 Netscape 浏览 器 支持 ， Sena 
而 E 和 其 他 浏览 器 (如 Opera) 暂 不 支持 一 
该 效果 。 图 5-9 设计 文字 的 修饰 效果 


5.2.4 ”案例 10 一 一 设计 垂直 对 齐 方式 vertical-align 


在 网 页 文本 编辑 中 ， 对 齐 有 很 多 方式 ， 字 符 排 在 一 行 的 中 央 位 置 叫 “ 居 中 ”。 文 章 的 
标题 和 表格 中 的 数据 一 般 都 居中 排 。 有 时 还 要 求 文字 垂直 对 齐 ， 即 文字 顶部 对 齐 ， 或 者 底 
部 对 齐 。 

在 CSS 中 ， 可 以 直接 使 用 vertical-align 属性 来 定义 ， 该 属性 用 来 设 定 垂直 对 齐 方式 。 该 
属性 定义 行内 元 素 的 基线 相对 于 该 元 素 所 在 行 的 基线 的 垂直 对 齐 ， 允 许 指定 负 长度 值 和 百 分 
比值 。 这 会 使 元 素 降 低 而 不 是 升 高 。 在 表单 元 格 中 ， 这 个 属性 会 设置 单元 格 框 中 的 单元 格 内 
容 的 对 齐 方式 。 

vertical-align 属性 的 语法 格式 如 下 : 

{vertical-align: 属 性 值 } 


vertical-align 属性 值 有 8 个 预 设 值 可 以 使 用 ， 也 可 以 使 用 百分比 。 这 8 个 预 设 值 如 表 5-4 
所 示 。 


表 5-4 vertical-align 的 属性 值 

















属性 值 说 明 
baseline 默认 。 元 素 放置 在 父 元 素 的 基线 上 
sub 垂直 对 齐 文本 的 下 标 
super 垂直 对 齐 文本 的 上 标 
top 把 元 素 的 顶端 与 行 中 最 高 元 素 的 顶端 对 齐 
text-top 把 元 素 的 顶端 与 父 元 素 字体 的 顶端 对 齐 
middle 把 此 元 素 放置 在 父 元 素 的 中 部 
bottom 把 元 素 的 顶端 与 行 中 最 低 的 元 素 的 顶端 对 齐 
text-bottom 把 元 素 的 底 端 与 父 元 素 字体 的 底 端 对 齐 
length 设置 元 素 的 堆 又 顺序 








% 使 用 line-height 属性 的 百分比 值 来 排列 此 元 素 。 人 允许 使 用 负 值 
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【 例 5.10】 设 计 段 落 中 文字 的 垂直 对 齐 方式 (案例 文件 : ch0S\S.10.htmD)。 


<!DOCTYPE html> 
<html> 
<head> 
<title> 文 字 修饰 </title> 
</head> 
<body> 
<p> 
中 国 <b style=" font-size:8pt;vertical-align:super">2012</b> 神 农 架 <b 
style="font-size: 8pt;vertical-align: sub">[ 注 ]</b> 是 一 个 充满 神奇 色彩 的 美丽 的 地 
方 ! ! 
<img src="images/1.gif" style="vertical-align: baseline"> 
</p> 
<p> 
中 国 <b style=" font-size:8pt;vertical-align:100%">2012</b> 万 里 长 城 <p 
style="font-size: 8pt;vertical-align: -100%">[ 注 ]</b> 是 雄伟 壮观 的 历史 遗迹 ! ! 
<img src="images/2.gif" style="vertical-align:middle"/> 
<img src="images/2.gif" style="vertical-align:text-top"> 
<img src="images/2.gif" style="vertical-align:bottom"> 
<img src="images/2.gif" style="vertical-align:text-—bottom"> 


</body> 
</html> 


使 用 IE 11.0 打开 文件 预览 ， 效 果 如 图 5-10 所 示 。 可 以 看 到 ， 文 字 在 垂直 方向 以 不 同 的 对 
齐 方式 显示 。 
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图 5-10 设计 文字 的 垂直 对 齐 方式 
从 上 面 实例 中 ， 可 以 看 出 在 页 面 中 的 数学 运算 或 注释 标号 使 用 上 下 标 比较 多 。 顶 端 对 齐 
有 两 种 参照 方式 : 一 种 是 参照 整个 文本 块 ， 另 一 种 是 参照 文本 。 底 部 对 齐 同 顶端 对 齐 方 式 相 
同 ， 分 别 参照 文本 块 和 文本 块 中 包含 的 文本 。 
DITA vertical-align AT HERA GPKARREARL. ABARA MTE, 
A 它 是 基于 行 高 的 值 来 计算 的 。 而 且 百分比 还 能 使 用 正 负 号 ， 正 百分比 使 文本 上 
升 ， 负 百分比 使 文本 下 降 。 


5.2.5 “案例 11 一 一 设计 文本 转换 text-transform 


根据 需要 ， 将 小 写字 母 转换 为 大 写字 母 ， 或 者 将 大 写字 母 转换 为 小 写字 母 ， 在 文本 编辑 
中 都 是 很 常见 的 。 使 用 text-transform 属性 可 用 于 设 定 文本 字体 的 大 小 写 转换 。 


text-transform 属性 的 语法 格式 如 下 : 


text-transform : none | capitalize | uppercase | lowercase 


text-transform 属性 值 的 含义 如 表 5-5 所 示 。 
表 5-5 text-transform 的 属性 值 





weuz ce 











属性 值 说 AA 
Done 无 转换 发 生 
capitalize 将 每 个 单词 的 第 一 个 字母 转换 成 大 写 ， 其 余 无 转换 发 生 
Uppercase 转换 成 大 写 
lowercase 转换 成 小 写 


因为 文本 转换 属性 仅 作 用 于 字母 型 文本 ， 相 对 来 说 比较 简单 。 
【 例 5.111 设计 段落 中 文本 的 转换 效果 (案例 文件 ，ch05\5.11.html)。 


<!DOCTYPE html> 

<html> 

<head> 

<title> 文 字 转 换 </title> 

</head> 

<body> 

<body> 
<p style="text-transform:none">we are good friends</p> 
<p style="text-transform:capitalize">we are good friends</p> 
<p style="text-transform:uppercase">we are good friends</p> 
<p style="text-transform:lowercase">WE ARE GOOD FRIENDS</p> 

</body> 

</html> 


AEH IE 11.0 打开 文件 预览 ， 效 果 如 图 5-11 所 示 。 可 以 看 到 ， 字 母 依照 设置 显示 大 小 写 。 
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5-11 文本 的 转换 效果 


5.2.6 案例 12 一 一 设计 水 平 对 齐 方式 text-align 


一 般 情况 下 ， 居 中 对 齐 适用 于 标题 类 文本 ， 其 他 对 齐 方 式 可 以 根据 页 面 布局 来 选择 使 
用 。 根 据 需 要 ， 可 以 设置 多 种 对 齐 ， 如 水 平方 向 上 的 居中 、 左 对 齐 、 右 对 齐 或 者 两 端 对 齐 
等 。 可 以 通过 text-align 属性 完成 水 平 对 齐 设置 。 

text-align 属性 用 于 定义 文本 对 象 的 对 齐 方 式 ， 其 语法 格式 如 下 : 
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{text-align: 属性 值 } 
text-align 属性 值 的 含义 如 表 5-6 所 示 。 
表 5-6 text-align 的 属性 值 











属性 什 说 明 
start 文本 向 行 的 开始 边缘 对 齐 
end 文本 向 行 的 结束 边缘 对 齐 
文本 向 行 的 左边 缘 对 齐 。 在 垂直 方向 的 文本 中 ， 文 本 在 left-to-right 模式 下 向 开始 
al 边缘 对 齐 








文本 向 行 的 右边 缘 对 齐 。 在 垂直 方向 的 文本 中 ， 文 本 在 left-to-right 模式 下 向 结束 
right 边缘 对 齐 








center 文本 在 行内 居中 对 齐 
justify 文本 根据 text-justify 的 属性 设置 方法 分 散 对 齐 。 即 两 端 对 齐 ， 均 匀 分 布 
继承 父 元 素 的 对 齐 方式 ， 但 有 个 例外 : 继承 的 start 或 者 end 值 是 根据 父 元 素 的 
ER direction 值 进行 计算 的 ， 因 此 计算 的 结果 可 能 是 left 或 者 right 
= string 是 一 个 单个 的 字符 ， 否 则 ， 就 忽略 此 设置 。 按 指定 的 字符 进行 对 齐 。 此 属性 
可 以 跟 其 他 关键 字 同 时 使 用 ， 如 果 没有 设置 字符 ， 则 默认 值 是 end 方式 
inherit 继承 父 元 素 的 对 齐 方式 


在 新 增加 的 属性 值 中 ，start 和 end 属性 值 主要 是 针对 行内 元 素 的 ， 即 在 包含 元 素 的 头 部 
或 尾部 显示 ; 而 <string> 属 性 值 主要 用 于 表格 单元 格 中 ， 将 根据 某 个 指定 的 字符 对 齐 。 
CAA 5.12】 设 计 段 落 中 文本 的 水 平 对 齐 方 式 (案例 文件 ，ch05\5.12.html)。 


<!DOCTYPE html> 

<html> 

<head> 

<title> 水 平 对 齐 方式 </title> 

</head> 

<body> 

<body> 

<hl style="text-align:center">Xili A</h1> 

<h3 style="text-align:left">%#A: 唐诗 三 百 首 </h3> 
<h3 style="text-align:right"> 作 者 : 李白 </h3> 

<p style="text-align:justify"> 

明月 出 天 山 ， 苍 茫 云 海 间 。<br> 

长 风 几 万 里 ， 吹 度 玉 门 关 。<br> 

WAG, MRA. <br> 

由 来 征战 地 ， 不 见 有 人 还 。 

</p> 

<p style="text-align:start"> 成 客 望 边 色 ， 思 归 多 苦 颜 。</p> 
<p style="text-align:end"> 高 楼 当 此 夜 ， 叹 息 未 应 闲 。</pP> 
</body> 

</html> 


使 用 TE 11.0 打开 文件 预览 ， 效 果 如 图 5-12 所 示 。 可 以 看 到 ， 文 字 在 水 平方 向 上 以 不 同 





的 对 齐 方式 显示 。 
(Q Eure ven 5 - e| amen TETY 
IAD SED EEV omen IET WDH 
关山 月 
HA: 唐诗 三 百 首 


作者 : 李白 
明月 出 天 山 ， 苍 茫 云 海 间 。 
长 风 几 万 里 ， 吹 度 玉 门 关 。 
RAB, MRA. 
由 来 征战 地 ， 不 见 有 人 还 。 
成 客 望 边 色 ， 思 归 多 昔 颜 。 


高 楼 当 此 夜 ， 叹 息 未 应 闲 。 








图 5-12 文本 的 水 平 对 齐 方式 


text-align 属性 只 能 用 于 文本 块 ， 而 不 能 直接 应 用 于 图 像 标记 <img>。 如 果 要 使 图 像 同 文本 
一 样 应 用 对 章 方式 ， 那 么 就 必须 将 图 像 包 含 在 文本 块 中 。 如 上 例 ， 由 于 向 右 对 齐 方式 作用 于 
<h3> 标 记 定义 的 文本 块 ， 图 像 包 含 在 文本 块 中 ， 所 以 图 像 能 够 同文 本 一 样 向 右 对 齐 。 


m 只 能 定义 两 端 对 齐 方式 ， 并 按 要 求 显 示 。 但 对 于 具体 的 两 端 对 齐 文本 如 
A be 并 不 规定 。 这 就 需要 设计 者 自行 定 
XT. 


5.2.7 “案例 13 一 一 设计 文本 缩 进 text-indent 


在 普通 段落 中 ， 通 常 首 行 缩 进 两 个 字符 ， 用 来 表示 这 是 一 个 段落 的 开始 。 同 样 ， 在 网 页 
的 文本 编辑 中 可 以 通过 指定 属性 来 控制 文本 缩 进 。 使 用 text-indent 属性 可 以 设 定 文本 块 中 首 
行 的 缩 进 。 

text-indent 属性 的 语法 格式 如 下 : 


text-indent : length 


其 中 ，length 属性 值 表示 由 百分比 数字 或 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 ， 允 许 为 
负 值 。 可 以 这 样 认为 ，text-indent 属性 可 以 定义 两 种 缩 进 方式 : 一 是 直接 定义 缩 进 的 长 度 二 
是 定义 缩 进 百分比 。 使 用 该 属性 ，HTML 任何 标记 都 可 以 让 首 行 以 给 定 的 长 度 或 百分比 

【 例 5.13】 设 计 段 落 中 文本 的 缩 进 方式 (案例 文件 ，ch05\5.13.html)。 


<!DOCTYPE html> 

<html> 

<head> 
<title> 文 本 缩 进 </title> 
</head> 
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<body> 

这 是 一 行 默认 文本 。 

<p style="text-indent:10mm"> 指 定 首 行 缩 进 10mm。 </p> 

<p style="text-indent:10%"> 首 行 缩 进 到 当前 行 的 百 分 之 十 。</p> 
</body> 

</html> 


使 用 TE 11.0 打开 文件 预览 ， 效 果 如 图 5-13 所 示 。 可 以 看 到 ， 文 本 以 不 同 的 首 行 缩 进 方式 
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这 是 一 行 默认 文本 - 
指定 首 行 缩 进 10mm。 
首 行 缩 进 到 当前 行 的 百 分 之 十 。 











图 5-13 文本 的 缩 进 方式 
如 果 上 级 标记 定义 了 text-indent 属性 ， 那 么 子 标记 可 以 继承 其 上 级 标记 的 缩 进 长 度 。 


5.2.8 ”案例 14 一 一 设计 文本 行 高 line-height 
在 CSS 中 ，line-height 属性 用 来 设置 行 间距 ， 即 行 高 。 其 语法 格式 如 下 : 


line-height: normal | length 
line-height 属性 值 的 具体 含义 如 表 5-7 所 示 。 
表 5-7 line-height 的 属性 值 


属性 值 说 AA 
normal 默认 行 高 ， 即 网 页 文本 的 标准 行 高 
生产 由 百分比 数字 或 由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 ， 允 许 为 负 值 。 其 百分比 取 值 是 


基于 字体 的 高 度 尺寸 





【 例 5.14】 设 计 段 落 中 文本 的 行 高 (案例 文件 ch05\5.14.html)。 


<!DOCTYPE html> 

<html> 

<head> 

<title> 文 本 行 高 </title> 

</head> 

<body> 

<p style="line-height:50px"> 

文字 列表 可 以 有 序 地 编排 一 些 信息 资源 ， 使 其 结构 化 和 条 理化 ， 并 以 列表 的 样式 显示 出 来 ， 以 便 浏览 者 能 
更 加 快捷 地 获得 相应 信息 。HTML 中 的 文字 列表 如 同文 字 编 辑 软 件 word 中 的 项 目 符号 和 自动 编号 。 

</p> 

<p style="line-height:70%"> 

文字 列表 可 以 有 序 地 编排 一 些 信息 资源 ， 使 其 结构 化 和 条 理化 ， 并 以 列表 的 样式 显示 出 来 ， 以 便 浏览 者 能 
更 加 快捷 地 获得 相应 信息 。HTML 中 的 文字 列表 如 同文 字 编 辑 软件 word 中 的 项 目 符号 和 自动 编号 。 

</p> 


eJ 





</body> i 
</html> 章 
使 用 TE 11.0 打开 文件 预览 ， 效 果 如 图 5-14 所 示 。 可 以 看 到 ， 有 一 段 文字 重 车 在 一 起 ， Hi 
即行 高 设置 较 小 。 a 
页 

Ce Cpe TE 列 

A 表 

与 

文字 列表 可 以 有 序 地 编排 一 些 信息 资源 ， 使 其 结构 化 和 条 理化 ， g 





并 以 列表 的 样式 显示 出 来 ， 以 便 浏 览 者 能 更 加 快捷 地 获得 相应 
信息 。HTML 中 的 文字 列表 如 同文 字 编 辑 软件 Word 中 的 项 目 符号 和 


自动 编号 。 


esc i 


Æ 5-14 设 定 文本 行 高 N 
5.2.9 案例 15 一 一 处 理 空白 white-space 





在 文本 编辑 中 ， 网 页 中 有 时 需要 包含 一 些 不 必要 的 制 表 符 、 换 行 符 或 者 额外 的 空白 符 ( 多 
于 单词 之 间 的 一 个 标准 的 空格 )， 这 些 符号 统称 为 空白 字符 。 通 常情 况 下 ， 希 望 忽 略 这 些 额 外 
的 空白 字符 。 浏 览 器 可 以 自动 完成 此 操作 并 按照 一 种 适合 窗口 的 方式 布置 文本 。 它 会 丢弃 段 
落 开头 和 结尾 处 任何 额外 的 空白 ， 并 将 单词 之 间 的 所 有 制 表 符 、 换 行 和 额外 的 空白 压缩 (合并 ) 
成 单一 的 空白 字符 。 此 外 ， 当 用 户 调整 窗口 大 小 时 浏览 器 会 根据 需要 重新 格式 化 文本 以 便 匹 
配 新 的 窗口 尺寸 。 对 于 某 些 元 素 ， 可 能 会 以 某 种 方式 特意 格式 化 文本 以 便 包 含 额外 的 空白 字 
符 ， 而 不 希望 抛弃 或 压缩 这 些 字 符 。 

使 用 white-space 属性 可 以 设置 对 象 内 空白 字符 的 处 理 方式 。white-space 属性 对 文本 的 显 
示 有 着 重要 的 影响 。 在 标记 上 应 用 white-space 属性 可 以 影响 浏览 器 对 字符 串 或 文本 间 空 白 的 
处 理 方式 。 

white-space 属性 的 语法 格式 如 下 : 


white-space :normal | pre | nowrap | pre-wrap | pre-line 
white-space 的 属性 值 含义 如 表 5-8 所 示 。 
表 5-8 white-space 的 属性 值 











属性 值 说 A 
Dormal 默认 。 空 白 会 被 浏览 器 忽略 
pre 空白 会 被 浏览 器 保留 。 其 行为 方式 类 似 HTML 中 的 <pre> 标签 
nowrap | 文本 不 会 换行 ， 文 本 会 在 同一 行 上 继续 ， 直 到 遇 到 <br 标签 为 止 





pre-wrap 保留 空白 符 序列 ， 但 是 正常 地 进行 换行 
e 
s$ 
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续 表 


属性 值 说 明 


pre-line | 合并 空白 符 序列 ， 但 是 保留 换行 符 
inherit 规定 应 该 从 父 元 素 继承 white-space 属性 的 值 


【 例 $.15】 设 计 段 落 中 文本 的 留 白 样 式 (案例 文件 ，ch05\5.15.html)。 


<!DOCTYPE html> 
<html> 
<head> 
<title> 处 理 空白 </title> 
</head> 
<body> 
` <hl style="color:red; text-align:center;white-space:pre"> 网 页 文字 列表 
N 设 计 </hl> 
<p style="white-space:nowrap; text—indent:10mm' 
LTAM DAIN te tated (IARC RLREEI, 并 以 列表 的 样式 显示 出 来 ， 以 便 浏 
览 者 能 更 加 快捷 地 获得 相应 信息 。< 
D 中 的 文字 列表 各 同文 字 编辑 软件 Word 中 的 项 目 符号 和 自动 编号 。 
</p> 
<p style="white-space:pre-wrap; text-indent:10mm"> 
文字 列表 可 以 有 序 地 编排 些 信息 资源 ， 使 其 结构 化 和 条 理化 ， 
we 并 以 列表 的 样式 显示 出 来 ， 以 便 浏 览 者 能 更 加 快捷 地 获得 相应 
ER. < 


‘br/> 

i 中 的 文字 列表 如 辐 文字 编辑 软件 Word 中 的 项 目 符号 和 自动 编号 。 

</p> 

Senet y le tun eerepace torecline: taste indent ml omars 

文字 列表 可 以 有 序 地 编排 一 些 信息 资源 ， 使 其 结构 化 和 条 理化 ， 并 以 列表 的 样式 显示 出 来 ， 以 便 浏 
览 者 能 更 加 快捷 地 获得 相应 信息 。<br> 

中 的 文字 列表 如 同文 字 编 辑 软件 wora 中 的 项 目 符号 和 自动 编号 。 

</p> 
pens 
</html> 


使 用 IE 11.0 打开 文件 预览 ， 效 果 如 图 5-15 所 示 。 可 以 看 到 ， 文 字 处 理 空白 的 不 同 
方式 。 








策 源 ， 使 其 结构 化 和 条 理化 ， 和 以 列表 的 样式 显示 出 来 ， 以 便 浏 览 者 





HT 中 的 文字 列表 如 同文 字 编 男 软件 Word 中 的 项 目 符号 和 自动 编号 





A515 设 定 文本 的 留 白 效 果 
5.2.10 ”案例 16 一 一 文本 反 排 unicode-bidi 
在 网 页 文本 编辑 中 ， 通 常 英语 文档 的 基本 方向 是 从 左 至 右 。 如 果 文 档 中 某 一 段 的 多 个 部 


| 





分 包含 从 右 至 左 阅读 的 语言 ， 则 该 语言 的 方向 将 正确 地 显示 为 从 右 至 左 。 使 用 unicode-bidi 和 
direction 两 个 属性 可 以 解决 文本 反 排 的 问题 。 

unicode-bidi 属性 的 语法 格式 如 下 : 

unicode-bidi : normal | bidi-override | embed 


unicode-bidi 属性 值 的 含义 如 表 5-9 所 示 。 
表 5-9 unicode-bidi 的 属性 值 


MUM ag a ia 








属性 值 说 明 
aes 默认 值 。 元 素 不 会 打开 一 个 额外 的 嵌入 级 别 。 对 于 内 联 元 素 ， 隐 式 的 重新 
排序 将 跨 元 素 边 界 起 作用 
i 与 embed 值 相同 ， 但 除了 这 一 点 外 : 在 元 素 内 ， 重 新 排序 依照 direction 属 
性 严格 按 顺 序 进行 。 此 值 蔡 代 隐 式 双向 算法 
ee 元 素 将 打开 一 个 额外 的 嵌入 级 别 。direction 属性 的 值 指定 嵌入 级 别 。 重 新 





排序 在 元 素 内 是 隐 式 进行 的 
direction 属性 用 于 设 定 文本 流 的 方向 ， 其 语法 格式 如 下 : 


| LEL I Inherit 


direction 属性 值 的 含义 如 表 5-10 所 示 。 
表 5-10 direction 的 属性 值 


direction : 


My 


文本 流 从 左 到 右 


文本 流 从 右 到 左 
文本 流 的 值 不 可 继承 


【 例 5.16】 设 计 段 落 中 文本 的 反 排 样式 (案例 文件 ，ch05\5.16.html)。 





<!DOCTYPE html> 





<html> 

<head> 

<title> 文 本 反 排 </title> = a se 
</head> (<) E) cAUsers\adminstron O ~ GC S xta 
<body> XHA RRE EEV GERA IAM WAH) 


<h2> 文 本 反 向 排序 显示 </h2> 

<p style=" direction:rtl; unicode- 
bidi:bidi-override; text-align:left"># 
ABO, WIRE AE. 

</p> 

</body> 

</html> 


使 用 IE 11.0 打开 文件 预览 ， 效 果 如 图 5-16 所 





示 。 可 以 看 到 ， 文 字 以 反 向 显示 。 





文本 反 向 排序 显示 


。 非 人 论 莫 谈 闲 ， 过 己 思 常 坐 静 
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5.3 ”综合 案例 一 一 制作 图 文 混 排 型 旅游 网 页 


在 一 个 网 页 新 闻 中 ， 出 现 最 多 的 就 是 文字 和 图 片 ， 二 者 放 在 一 起 ， 图 文 并 茂 ， 能 够 生动 


地 表达 新 闻 主 题 。 本 实例 将 会 利用 前 面 介绍 的 文本 和 段落 属性 ， 创 建 一 个 图 片 的 简单 混 排 。 
复杂 的 图 片 混 排 ， 会 在 后 面 介绍 。 有 具体 操作 步骤 如 下 。 


1. 分 析 需 求 
本 综合 实例 的 要 求 如 下 : 在 网 页 的 最 上 方 显 示 出 标题 ， 标 题 下 方 是 正文 ， 在 正文 显示 部 


分 显示 图 片 。 其 实例 效果 图 如 图 5-17 所 示 。 


司 E\BaiduNetdiskDownload D ~ © | S 相遇 六 朋 页 «(OS 
RH RG) SEV CBAN IAM MMH 


SHAT ta. AOR ESS EL 


PRR RANMA, MEFE, WE MORA MEN NERE, RSS 
辖 地 区 又 辖 县 市 的 自治 州 。 西 部 紧邻 网 亚 国 家 哈萨克 志 坦 ， 访 里 有 中 国 陆路 最 大 的 衣 商 口岸 (ERRNO) o 


伊犁 哈萨克 自治 州 ， 地 处 祖国 西北 边 陆 ， 气 候 宜 人 ， 是 中 国 十 大 家 居中 小 城市 之 一 ， 降 水 量 较为 丰富 。 


自治 州 境内 对 有 昔 通 高 等 院 校 伊 型 师范 学 了 忱 、 新 疆 生产 建设 兵团 农业 第 
四 、 七 、 八 、 九 、 十 师 和 新 疆 矿 治 局 、 天 西林 业 局 、 阿 山林 业 局 、 新 疆 兰 烟 
国 一 、 阿 举例 矿 等 一 批 中 央 和 自治 区 直属 单位 。 伊 犁 被 誉 为 “塞外 江南 ”、 
“PTR”, “WA” Pm RPMI. 
PRMAILR. RI. ABATE. PAA HRT 
+ SOT AIR. RAN RRSOTT AM, ESR AE 6 人 立方 
PK, SHERI, RRS, TOS MAN, BALD AM 
FHIAMEAS, RARBONS RAT RARE. WAA 
TIA. 地理 、 水 休 、 生 物 景 观 和 文物 古迹 、 民 俗 风情 、 休 闲 健身 等 六 大 旅游 次 
源 类 型 一 应 俱全 。 有 英 丽 的 草原 风光 ， 染 部 的 民俗 风情 ， 独 特 的 草原 文化 ， 念 久 的 历史 古迹 ， 是 中 国 西部 最 理想 的 放 洲 
目的 地 。 



















图 5-17 图 文 混 排 旅游 网 页 
2. 实现 代码 
SSD 打开 记事 本 ， 编 写 HTML 代码 基本 框架 。 具 体 代码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 
<title> 图 文 混 排 网 页 </title> 
</head> 

<body> 

</body> 

</html> 


在 <body> 标 签 中 插入 网 页 标题 设计 代码 : 


<hl style="text—align:center;text-shadow:0.lem 2px 6px blue; font— 


size:18px"> 塞 外 江南 : 伊犁 哈萨克 自治 州 </h1> 
在 <body> 标 签 中 插入 图 片 设计 代码 : 


<img src="images/3.jpg" style="text-align:center;width:300px; float:left; 
border: #000000 solid 2px"> 


在 <body> 标 签 中 完善 文本 段落 内 容 设 计 代码 : 


<p style="text—indent : 8mm; line-height: Tm" >A WS Boe I HEA FPA, AL 
于 1954 年 ， 辖 塔 城 、 阿 勒 泰 两 个 地 区 和 10 个 直属 县 市 ， 是 全 国 唯一 的 既 辖 地 区 又 辖 县 市 的 自治 州 。 

西部 紧邻 欧 亚 国家 哈萨克 斯 坦 ， 这 里 有 中 国 陆路 最 大 的 通商 口岸 ( 霍 尔 果 斯 口岸 ) 。 

</p> 

<p style="text-indent:8mm;line-height: Tom" > 伊犁 哈萨克 自治 州 ， 地 处 祖国 西北 边 隆 ， 气 
候 宜人 ， 是 中 国 十 大 宜 居中 小 城市 之 一 ， 降 水 量 较为 丰富 。</p> 

<img src="images/3.jpg" style="text-align:center;width:300px; float:left; 

border:#000000 solid 2px"> 

<p style="text-indent:8mm;line-height: 7mm"> 自 治 州 境内 驻 有 普通 高 等 院 校 伊犁 师范 学 

院 、 新 疆 生产 建设 兵团 农业 第 四 、 七 、 八 、 九 、 十 师 和 新 疆 矿 冶 局 、 天 西林 业 局 、 阿 山林 业 局 、 新 疆 卷 
烟 厂 、 阿 希 金 矿 等 一 批 中 央 和 自治 区 直属 单位 。 伊 犁 被 誉 为 “塞外 江南 ”、“ 中 亚 湿 岛 ”，“ 花 城 ” 伊 
宁 市 是 伊犁 州 的 首府 。<br> 

伊犁 幅员 辽阔 ， 资 源 充裕 ， 有 着 得 天 独 厚 的 优势 。 伊 犁 的 矿产 资源 种 类 齐全 。 生 物资 源 十 分 珍贵 。 森 林 
面积 88 万 公顷 ， 活 立木 总 蓄积 量 1 . 6 (LK, HAMM 74%; 保存 着 60 多 种 珍稀 动物 ，700 多 种 
植物 ， 是 世界 上 少 有 的 生物 多 样 性 天 然 基因 库 ， 具 有 很 高 的 科学 研究 和 开发 利用 价值 。 旅 游资 源 独特 。 
地 理 、 水 体 、 生 物 景观 和 文物 古迹 、 民 俗 风情 、 休 闲 健身 等 六 大 旅游 资源 类 型 一 应 俱全 。 有 美丽 的 草原 
风光 ， 浓 郁 的 民俗 风情 ， 独 特 的 草原 文化 ， 悠 久 的 历史 古迹 ， 是 中 国 西部 最 理想 的 旅游 目的 地 。 

</p> 


SED 保存 编辑 好 的 网 页 文件 ， 保 存 名 称 为 “图 文 混 排 网 页 .html”。 


54 高 手 解 惑 


疑问 1: 无 序列 表 <ul> 元 素 的 作用 ? 

答 : 无 序列 表 元 素 主要 用 于 条 理化 和 结构 化 文本 信息 。 在 实际 开发 中 ， 无 序列 表 在 制作 
导航 菜单 时 使 用 广泛 。 导 航 菜单 的 结构 一 般 都 使 用 无 序列 表 实 现 。 

疑问 2: 文字 和 图 片 导 航速 度 谁 更 快 ? 


答 : 使 用 文字 做 导航 栏 。 文 字 导 航 不 仅 速度 快 ， 而 且 更 稳定 。 例 如 ， 有 些 用 户 上 网 时 会 
关闭 图 片 。 在 处 理 文本 时 ， 不 要 在 普通 文本 上 添加 下 画 线 或 者 颜色 。 除 非特 别 需要 ， 和 否则 不 
要 为 普通 文字 添加 下 画 线 。 就 像 用 户 需要 识别 哪些 能 点 击 一 样 ， 读 者 不 应 当 将 本 不 能 点 击 的 
文字 误 认为 能 够 点 击 。 


RUT SRS AS 











第 6 章 
HTML 5 网 页 中 
的 图 像 


图 像 是 网 页 中 最 主要 也 是 最 常用 的 元 素 。 图 像 在 网 页 中 具有 画龙点睛 的 作用 。 
它 能 装饰 网 页 ， 表 达 个 人 的 情调 和 风格 。 但 在 网 页 上 加 入 的 图 片 越 多 ， 浏 览 的 速度 
就 越 会 受到 影响 ， 可 能 导致 用 户 失 去 耐心 而 离开 页 面 。 本 章 介 绍 如 何 使 用 HIML 5 
为 网 页 插入 图 像 。 


重点 案例 效果 
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6.1 网 页 中 的 图 像 <img> 


俗话 说 “一 图 胜 千言 ”， 图 片 是 网 页 中 不 可 或 缺 的 元 素 ， 巧 妙 地 在 网 页 中 使 用 图 片 可 以 
为 网 页 增色 不 少 。 网 页 支持 多 种 图 片 格式 ， 并 且 可 以 对 插入 的 图 片 设置 宽度 和 高 度 。 


6.1.1 网 页 中 支持 的 图 片 格式 


网 页 中 可 以 使 用 GIF、JPEG、BMP、TIFF、PNG 等 格式 的 图 像 文件 ， 其 中 使 用 最 广泛 的 
主要 是 GIF 和 JPEG 两 种 格式 。 


1. GIF 格式 


GIF 格式 是 由 Compuserve 公司 提出 的 与 设备 无 关 的 图 像 存储 标准 ， 也 是 Web 上 使 用 最 
早 、 应 用 最 广泛 的 图 像 格 式 。GIF 是 通过 减少 组 成 图 像 的 每 个 像素 的 储存 位 数 和 LZH 压缩 存 
储 技术 来 减少 图 像 文 件 的 大 小 。GIF 格式 最 多 只 能 是 256 色 的 图 像 。 

GIF 图 像 文件 短小 ， 下 载 速度 快 ， 低 颜色 数 下 GIF 比 JPEG 载 入 得 更 快 ， 可 用 许多 具有 同 
样 大 小 的 图 像 文件 组 成 动画 。 在 GIF 图 像 中 可 指定 透明 区 域 ， 使 图 像 具 有 非 同一 般 的 显示 
效果 。 


2. JPEG 格式 


JPEG 格式 是 目前 Internet 中 最 受 欢迎 的 图 像 格式 。 它 可 以 支持 多 达 16M 的 颜色 ， 能 展现 
十 分 丰富 生动 的 图 像 ， 还 能 压缩 。 但 其 压缩 方式 是 以 损失 图 像 质量 为 代价 的 ， 压 缩 比 越 高 ， 
图 像 质量 损失 越 大 ， 图 像 文 件 也 就 越 小 。 

位 图 BMP 格式 的 图 像 是 Windows 支持 的 较为 流行 的 图 像 格 式 。 一 般 情 况 下 ， 同 一 图 像 
的 BMP 格式 的 大 小 是 JPEG 格式 的 S~10 倍 。 而 GIF 格式 最 多 只 能 是 256 色 ， 因 此 载 入 256 
色 以 上 图 像 的 JPEG 格式 成 了 Internet 中 最 受 欢迎 的 图 像 格式 。 

当 网 页 中 需要 载 入 一 个 较 大 的 GIF 或 JPEG 图 像 文件 时 ， 载 入 速度 会 很 慢 。 为 改善 网 页 
的 视觉 效果 ， 可 以 在 载 入 时 设置 为 隔行 扫描 。 隔 行 扫描 在 显示 图 像 开 始 时 看 起 来 非常 模糊 ， 
接着 细节 逐渐 添加 上 去 ， 直 到 图 像 完 全 显示 出 来 。 

GIF 是 支持 透明 、 动 画 的 图 片 格式 ， 但 色彩 只 有 256 色 。JPEG 是 一 种 不 支持 透明 和 动画 
的 图 片 格式 ， 但 是 色彩 模式 比较 丰富 ， 保 留 大 约 1670 万 种 颜色 。 


SY 网 页 中 现在 也 有 很 多 PNG 格式 的 图 片 。PNG 图 片 具有 不 失真 、 兼 有 GIF 和 
TPG 的 色彩 模式 、 网 络 传输 速度 快 、 支 持 透明 图 像 制作 的 特点 ， 近 年 来 在 网 络 中 也 
很 流行 。 
6.1.2 图像 中 的 路 径 
HTML 文档 支持 文字 、 图 片 、 声 音 、 视 频 等 媒体 格式 。 但 是 在 这 些 格式 中 ， 除 了 文本 是 


写 在 HTML 中 的 ， 其 他 都 是 嵌入 式 的 ，HTML 文档 只 记录 了 这 些 文件 的 路 径 。 这 些 媒体 信息 
能 否 正确 显示 ， 路 径 至 关 重 要 。 

路 径 的 作用 是 定位 一 个 文件 的 位 置 。 文 件 的 路 径 可 以 有 两 种 表述 方法 ， 以 当前 文档 为 参 
照 物 表示 文件 的 位 置 ， 即 相对 路 径 。 以 根 目录 为 参照 物 表示 文件 的 位 置 ， 即 绝对 路 径 。 

为 了 方便 讲述 绝对 路 径 和 相对 路 径 ， 先 看 如 图 6-1 所 示 的 目录 结构 。 





6-1 目录 结构 


1. 绝对 路 径 

plan, Æ E aI webs 目录 下 的 images 下 有 一 个 tpjpg 图 像 ， 那 么 它 的 路 径 就 是 
E:vwebs\imagesvtp.jpg， 像 这 种 完整 地 描述 文件 位 置 的 路 径 就 是 绝对 路 径 。 如 果 将 图 片 文件 
tp.jpg 插入 到 网 页 index.html 中 ， 绝 对 路 径 表示 方式 如 下 : 


E:\webs\images\tp. jpg 


如 果 使 用 了 绝对 路 径 E:\webs\images\tp.jjpg 进行 图 片 链接 ， 那 么 在 本 地 电脑 中 将 一 切 正 
常 ， 因 为 在 E:\webs\images 下 的 确 存 在 tp.jpg 这 个 图 片 。 如 果 将 文档 上 传 到 网 站 服务 器 上 后 ， 
那 就 会 不 正常 了 ， 因 为 服务 器 给 你 划分 的 存放 空间 可 能 在 E 盘 其 他 目录 中 ， 也 可 能 在 D 盘 其 
他 目录 中 。 为 了 保证 图 片 正常 显示 ， 必 须 从 webs 文件 夹 开 始 ， 放 到 服务 器 或 其 他 电脑 的 EE 盘 
RARE. 

通过 上 述 讲解 ， 读 者 会 发 现 ， 如 果 链 接 的 资源 是 本 站 点 内 的 使 用 绝对 路 径 ， 对 位 置 要 求 
非常 严格 。 因 此 ， 链 接 本 站 点 内 的 资源 不 建议 采用 绝对 路 径 。 如 果 链 接 其 他 站 点 的 资源 ， 必 
须 使 用 绝对 路 径 。 

2. 相对 路 径 

如 何 使 用 相对 路 径 设 置 上 述 图 片 呢 ? 所 谓 相 对 路 径 ， 顾 名 思 义 就 是 以 当前 位 置 为 参考 
点 ， 自 己 相 对 于 目标 的 位 置 。 例 如 ， 在 index.htm 中 链接 tp.jpg 就 可 以 使 用 相对 路 径 。 
index.html 和 tp.jpg 图 片 的 路 径 根据 上 述 目录 结构 图 可 以 这 样 来 定位 ， 从 index.html 位 置 出 
发 ， 它 和 images 属于 同 级 ， 路 径 是 通 的 ， 因 此 可 以 定位 到 images, images 的 下 级 就 是 
了 pjpg。 使 用 相对 路 径 表 示 图 片 如 下 : 
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images/tp.jpg 

使 用 相对 路 径 ， 不 论 将 这 些 文 件 放 到 哪里 ， 只 要 tpjpg 和 index.html 文件 的 相对 关系 没有 
变 ， 就 不 会 出 错 。 

在 相对 路 径 中 ，“..” 表 示 上 一 级 目录 ，“../..” 表 示 上 级 的 上 级 目录 ， 以 此 类 推 。 例 
如 ， 将 tp.jpg 图 片 插入 到 ahtml 文件 中 ， 使 用 相对 路 径 表 示 如 下 : 


.-/images/tp.jpg 
Q d 细心 的 读者 会 发 现 ， 路 径 分 隔 符 使 用 了 “\” 和 “/” 两 种 ， 其 中 “\” 表示 本 地 
站 入 。 分 隔 符 ，“/” 表 示 网 络 分 隔 符 。 因 为 网 站 制作 好 后 肯定 是 在 网 络 上 运行 的 ， 所 以 
要 求 使 用 “/” 作 为 路 径 分 隔 符 。 
有 的 读者 可 能 会 有 这 样 的 疑惑 : 一 个 网 站 有 许多 链接 ， 怎 么 能 保证 它们 的 链接 都 正确 ， 
如 果 修 改 了 图 片 或 网 页 的 存储 路 径 ， 那 不 是 全 乱 了 吗 ? 如 何 提高 工作 效率 呢 ? 





et Dreamweaver 工具 的 站 点 管理 功能 ， 不 但 可 以 将 绝对 路 径 自动 地 转化 为 相 
XQ 对 路 径 ， 并 且 当 在 站 点 中 改动 文件 路 径 时 ， 与 这 些 文件 关联 的 链接 路 径 都 会 自 
动 更 改 。 


6.2 在 网 页 中 插入 图 像 


图 像 可 以 美化 网 页 。 插 入 图 像 使 用 单 标记 <img>。img 标记 的 属性 及 其 描述 如 表 6-1 

















所 示 。 
表 6-1 img 标记 的 属性 及 其 描述 
属 性 值 描 述 
alt text 定义 有 关 图 形 的 简短 的 描述 
sre URL 要 显示 的 图 像 的 URL 
height pixels % 定义 图 像 的 高 度 
ismap URL 把 图 像 定义 为 服务 器 端的 图 像 映射 
定义 作为 客户 端 图 像 映射 的 一 幅 图 像 。 请 参阅 <map> 和 <area> 
i jia 标签 ， 了 解 其 工作 原理 
vspace pixels 定义 图 像 项 部 和 底部 的 空白 。 不 支持 。 请 使 用 CSS 代替 
width pixels % 设置 图 像 的 宽度 


6.2.1 案例 1 一 一 插入 图 像 
sre 属性 用 于 指定 图 像 源 文件 的 路 径 ， 它 是 img 标记 必 不 可 少 的 属性 。 其 语法 格式 如 下 : 
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<img src=" 图 像 路 径 "> 

图 像 的 路 径 可 以 是 绝对 路 径 ， 也 可 以 是 相对 路 
径 。 下 面 的 实例 是 在 网 页 中 插入 图 像 。 

LA 6.1】 在 网 页 中 插入 图 像 (案例 文件 : 
ch06\6.1.html). 


<!DOCTYPE html> 

<html> 

<head> 

<title> 插 入 图 片 </title> 
</head> 

<body> 

<img src="images/01.jpg"> 
</body> 

</html> 











在 下 11.0 中 预览 ， 效 果 如 图 6-2 所 示 。 
6.2.2 ”案例 2 一 一 从 不 同位 置 插入 图 像 


在 插入 图 片 时 ， 用 户 可 以 将 其 他 文件 夹 或 服务 器 的 图 片 显 示 到 网 页 中 。 
【 例 6.2】 从 不 同位 置 插入 图 像 (案例 文件 : 
ch06\6.2.html). 


图 6-2 插入 图 像 


O “一 一 -一 一 
<!DOCTYPE html> 
<html> 
<body> 
<p> 
来 自 一 个 文件 夹 的 图 像 : 
<img src="images/meishi.jpg" /> 
</p> 
BA AH RANA 
KÉ baidu 的 图 像 : 

i 20, 
<img 7 
src="http://www.baidu.com/img/shouye b548 Baia 
6898c692066bd2cbaeda86d74448.gif" /> A 
</p> 
</body> 图 6-3 ”从 不 同位 置 插入 图 像 
</html> 


Æ IE 11.0 中 预览 ， 效 果 如 图 6-3 所 示 。 


6.3 ”编辑 网 页 中 的 图 像 


在 插入 图 片 时 ， 用 户 还 可 以 编辑 网 页 中 的 图 像 。 
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6.3.1 案例 3 一 一 设置 图 像 的 宽度 和 高 度 


在 HTML 文档 中 ， 还 可 以 设置 插入 图 片 的 显示 大 小 ， 一 般 是 按 原始 尺寸 显示 ， 但 也 可 以 


任意 设置 显示 尺寸 。 设 置 图 像 尺寸 分 别 用 属性 width( 宽 度 ) 和 height( 高 度 )。 


【 例 6.3】 设 置 图 像 的 宽度 和 高 度 (案例 文件 : ch06\6.3.htmD。 


<!DOCTYPE html> 

<html> 

<head> 

<title> 设 置 图 像 的 宽度 和 高 度 </title> 

</head> 

<body> 

<img src="images/meishi.jpg"> 

<img src="images/meishi.jpg" width="200"> 
<img src="images/meishi.jpg" width="200" height="300"> 
</body> 

</html 


在 正 11.0 中 预览 ， 效 果 如 图 6-4 所 示 。 
由 图 6-4 可 以 看 到 ， 图 片 的 显示 尺寸 是 由 width( 宽 度 ) 和 height( 高 度 ) 控 制 。 当 只 为 图 片 设 


置 一 个 尺寸 属性 时 ， 另 一 个 尺寸 就 以 图 片 原始 的 长 宽 比例 来 显示 。 图 片 的 尺寸 单位 可 以 选择 
百分比 或 数值 。 百 分 比 是 相对 尺寸 ， 数 值 是 绝对 尺寸 。 











图 6-4 设置 图 像 的 宽度 和 高 度 
对 于 网 页 中 插入 的 图 像 都 是 位 图 ， 放 大 尺寸 ， 图 像 会 出 现 马 赛 克 ， 变 得 模糊 。 
DIA 在 Windows 中 查看 图 片 的 尺寸 ， 只 需要 找到 图 像 文 件 ， 把 鼠标 指针 移动 到 图 
`A 


像 上 ， 停 留 几 秒 后 ， 就 会 出 现 一 个 提示 框 ， 说 明 图 像 文件 的 尺寸 。 尺 寸 后 显示 的 
数字 ， 代 表 图 像 的 宽度 和 高 度 ， 如 256x256。 


6.3.2 ”案例 4 一 一 设置 图 像 的 提示 文字 


图 像 提 示 文 字 的 作用 有 两 个 。 其 一 ， 当 浏览 网 页 时 ， 如 果 图 像 下 载 完成 ， 将 鼠标 指针 放 


S 


在 该 图 像 上 ， 鼠 标 指针 旁边 会 出 现 提 示 文 字 ， 为 图 像 添加 说 明 性 文字 。 其 二 ， 如 果 图 像 没有 
成 功 下 载 ， 在 图 像 的 位 置 上 就 会 显示 提示 文字 。 

为 图 像 添 加 提示 文字 可 以 方便 搜索 引擎 的 检索 。 除 此 之 外 ， 图 像 提示 文字 的 作用 还 有 以 
下 两 个 。 

O 当 浏览 网 页 时 ， 如 果 图 像 下 载 完成 ， 将 鼠标 指针 放 在 该 图 像 上 ， 鼠 标 指针 旁边 会 显 
示 title 标签 设置 的 提示 文字 。 

(2) 如 果 图 像 没 有 成 功 下 载 ， 在 图 像 的 位 置 上 会 显示 alt 标记 设置 的 提示 文字 。 

下 面 的 实例 将 为 图 片 添加 提示 文字 效果 。 

【 例 6.4】 设 置 图 像 的 提示 文字 (案例 文件 :ch06\6.4htmD)。 
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<!DOCTYPE html> 

<html> 

<head> 

<title> 图 片 文字 提示 </title> 

</head> 

<body> 

<img src="images/meishi.jpg" alt=" 未 加 载 完成 时 显示 的 替代 文字 " title=" HERE 
拉 "> 

</body> 

</html> 


在 IE 11.0 中 预览 效果 如 图 6-5 所 示 。 用 户 将 鼠标 放 在 图 片上 ， 即 可 看 到 提示 文字 。 
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图 6-5 图 片 文字 提示 
随 着 互联 网 技术 的 发 展 ， 网 速 已 经 不 是 制约 因素 ， 因 此 一 般 都 能 成 功 下 载 图 
NE 4. WA, alt 还 有 另外 一 个 作用 ， 即 在 百度 、Google 等 搜索 引擎 中 ， 搜 索 图 片 不 
如 搜索 文字 方便 ， 如 果 给 图 片 添加 适当 提示 ， 可 以 方便 搜索 引擎 的 检索 。 
6.3.3 ”案例 5 一 一 将 图 片 设置 为 网 页 背景 


在 插入 图 片 时 ， 用 户 可 以 根据 需要 将 某 些 图 片 设置 为 网 页 的 背景 。GIF 和 IPG 文件 均 可 
用 作 HTML 背景 。 如 果 图 像 小 于 页 面 ， 图 像 会 进行 重复 。 
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【 例 6.5】 将 图 片 设置 为 网 页 背景 (案例 文件 : 
ch06\6.5.html). 


<!DOCTYPE html> 








<html> 
<body background="images/background.jpg"> 
<h3> 图 像 背景 </h3> 
</body> 
</html> 
在 正 11.0 中 预览 ， 效 果 如 图 6-6 所 示 。 
6.3.4 ”案例 6 一 一 排列 图 像 6-6 “图像 背景 


在 网 页 的 文字 中 ， 如 果 插 入 图 片 ， 这 时 可 以 对 图 像 进行 排序 。 常 用 的 排序 方式 有 居中 、 
底部 对 齐 、 顶 部 对 齐 三 种 。 
【 例 6.6】 排 列 图 像 ( 案 例文 件 ，ch06\6.6.html)。 


<!DOCTYPE html> 

<html> 

<body> 

<h2> 未 设置 对 齐 方式 的 图 像 : </h2> 

<p> 图 像 <img src ="images/logo.gif"> 在 文本 中 </p> 

<h2> 已 设置 对 齐 方式 的 图 像 : </h2> 

<p> 图 像 <img src=" images/logo.gif " align="bottom"> 在 文本 中 </p> 
<p> 图 像 <img src =" images/logo.gif " align="middle"> 在 文本 中 </p> 
<p> 图 像 <img src =" images/logo.gif " align="top"> 在 文本 中 </p> 
</body> 

</html> 


在 IE 11.0 中 预览 ， 效 果 如 图 6-7 所 示 。 
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6.4 综合 案例 一 一 图 文 并 茂 的 房屋 装饰 装修 网 页 


本 章 讲述 了 网 页 组 成 元 素 中 最 常用 的 文本 和 图 片 。 本 综合 实例 将 创建 一 个 由 文本 和 图 片 
构成 的 房屋 装饰 效果 网 页 ， 如 图 6-8 所 示 。 
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图 6-8 房屋 装饰 效果 网 页 


具体 操作 步骤 如 下 。 
在 Dreamweaver CC 中 新 建 HTML 5 文档 。 代 码 如 下 : 


<!DOCTYPE html> 

<html > 

<head> 
<title> 房 屋 装饰 装修 效果 图 </title> 
</head> 

<body> 

</body> 

</html> 


在 body 部 分 增加 如 下 HTML 代码 ， 保 存 页 面 。 


<p> <img src="images/xiyatu.jpg" width="300" height="200"/> <img 
src="images/stadshem.jpg" width="300" height="200"/><br /> 
西雅图 原生 态 公寓 室内 设计 4 stadshem 小 户型 公寓 设计 ( 带 阁楼 ) </p> 

<hr/> 

<p> <img src="images/gingxinhuoli.jpg" width="300" height="200"/> <img 
src="images/renwen.jpg" width="300" height="200"/><br /> 

清新 活力 家 居 与 人 文 简约 悠然 家 居 </p> 


<hr /> 
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SY <hr> 标 记 的 作用 是 定义 内 容 中 的 主题 变化 ， 并 显示 为 一 条 水 平 线 ， 在 HTML 5 
NEO PERRETE. 
另外 ， 快 速 插入 图 片 及 设置 相关 属性 ， 可 以 借助 Dreamweaver CC 的 插入 功能 ， 或 按 
CtrlHHAltHI 组 合 键 。 


65 高 手 解 惑 


疑问 1: 在 浏览 器 中 ， 图 片 无 法 正常 显示 ， 为 什么 ? 


E: 图 片 在 网 页 中 属于 嵌入 对 象 ， 并 不 是 图 片 保存 在 网 页 中 ， 网 页 只 是 保存 了 指向 图 片 
的 路 径 。 浏 览 器 在 解释 HTML 文件 时 ， 会 按 指定 的 路 径 去 寻找 图 片 ， 如 果 在 指定 的 位 置 不 存 
在 图 片 ， 就 无 法 正常 显示 。 为 了 保证 图 片 的 正常 显示 ， 制 作 网 页 时 需要 注意 以 下 几 点 。 

(1) 图 片 格式 一 定 是 网 页 支持 的 。 

(2) 图 片 的 路 径 一 定 要 正常 ， 并 且 图 片 文件 扩展 名 不 能 省 略 。 

G) HTML 文件 位 置 发 生 改变 时 ， 图 片 一 定 要 跟随 着 改变 ， 即 图 片 位 置 和 HTML 文件 位 
置 始终 保持 相对 一 致 。 


疑问 2: 在 网 页 中 ， 有 时 使 用 图 像 的 绝对 路 径 ， 有 时 使 用 相对 路 径 ， 为 什么 ? 


E: 如 果 在 同一 个 文件 中 需要 反复 使 用 一 个 相同 的 图 像 文件 时 ， 最 好 在 <img> 标 签 中 使 用 
相对 路 径 名 ， 不 要 使 用 绝对 路 径 名 或 URL， 因 为 ， 使 用 相对 路 径 名 ， 浏 览 器 只 需 将 图 像 文 件 
下 载 一 次 ， 再 次 使 用 这 个 图 像 时 ， 只 要 重新 显示 一 遍 即 可 。 如 果 使 用 绝对 路 径 名 ， 每 次 显示 
图 像 时 ， 都 要 下 载 一 次 图 像 ， 这 将 大 大 降低 图 像 的 显示 速度 。 
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Fey HTML 5 网 页 设计 


案例 课堂 第 2 版) D~- 


7.1 网 页 超 链接 的 概念 


所 谓 超 链接 ， 是 指 从 一 个 网 页 指向 一 个 目标 的 链接 关系 。 这 个 目标 可 以 是 另 一 个 网 页 ， 
也 可 以 是 相同 网 页 上 的 不 同位 置 ， 还 可 以 是 一 个 图 片 、 一 个 电子 邮件 地 址 、 一 个 文件 ， 甚 至 
是 一 个 应 用 程序 。 


7.1.1 什么 是 网 页 超 链接 


超 链 接 是 一 种 对 象 ， 它 以 特殊 编码 的 文本 或 图 形 的 形式 来 实现 链接 。 如 果 单 击 该 链接 ， 
则 相当 于 指示 浏览 器 移 至 同一 网 页 内 的 某 个 位 置 ， 或 打开 一 个 新 的 网 页 ， 或 打开 某 一 个 新 的 
WWW 网 站 中 的 网 页 。 

网 页 中 的 链接 按照 链接 路 径 的 不 同 ， 可 以 分 为 3 种 类 型 ， 分 别 是 内 部 链接 、 锚 点 链接 和 
外 部 链接 。 按 照 使 用 对 象 的 不 同 ， 网 页 中 的 链接 又 可 以 分 为 文本 超 链 接 、 图 像 超 链接 、E-mail 
链接 、 锚 点 链接 、 多 媒体 文件 链接 、 空 链接 等 。 

在 网 页 中 ， 一 般 文字 上 的 超 链 接 都 是 蓝 色 ， 文 字 下 面 有 一 条 下 画 线 。 当 移动 鼠标 指针 到 
该 超 链 接 上 时 ， 鼠 标 指针 就 会 变 成 一 只 手 的 形状 ， 这 时 用 鼠标 左 键 单 击 ， 就 可 以 直接 跳 转 到 
与 这 个 超 链接 相连 接 的 网 页 或 WWW 网 站 上 去 。 如 果 用 户 已 经 浏览 过 某 个 超 链接 ， 这 个 超 链 
接 的 文本 颜色 就 会 发 生 改变 (默认 为 紫色 )。 只 有 图 像 的 超 链接 访问 后 颜色 不 会 发 生变 化 。 


7.1.2” 超 链接 中 的 URL 


URL 为 Uniform Resource Locator 的 缩写 ， 通 常 翻译 为 “统一 资源 定位 器 ”， 也 就 是 人 们 
通常 说 的 “网 址 ”， 它 用 于 指定 Internet 上 的 资源 位 置 。 

网 络 中 的 计算 机 之 间 是 通过 P 地 址 区 分 的 。 如 果 希 望 访问 网 络 中 某 台 计算 机 中 的 资源 ， 
首先 要 定位 到 这 台 计 算 机 。IP 地 址 是 由 32 位 二 进 制 数 ( 即 32 个 0/1 代码 ) 组 成 的 ， 数 字 之 间 没 
有 意义 ， 不 容易 记忆 。 为 了 方便 记忆 ， 现 在 计算 机 一 般 采 用 域名 的 方式 来 寻 址 ， 即 在 网 络 上 
使 用 一 组 有 意义 字符 组 成 的 地 址 代替 P 地 址 来 访问 网 络 资源 。 

URL 由 4 个 部 分 组 成 ， 即 “协议 ”“ 主 机 名 ”“ 文 件 夹 名 ”“ 文 件 名 ”， 如 图 7-1 所 示 。 





http://w. webDesign. com/pages/computer. html 
T T 
协议 主机 名 文件 夹 名 文件 名 


7-1 URL 组 成 


互联 网 中 有 各 种 各 样 的 应 用 ， 如 Web 服务 、FTP 服务 等 。 每 种 服务 应 用 都 有 对 应 的 协 
议 ， 通 常 通过 浏览 器 浏览 网 页 的 协议 都 是 HTTP 协议 ， 即 “ 超 文本 传输 协议 ”， 因 此 网 页 的 
地 址 都 以 http:/ 开 头 。 

www.baidu.com 为 主机 名 ， 表 示 文 件 存在 于 哪 台 服 务 器 ， 主 机 名 可 以 通过 IP 地 址 或 者 域 
名 来 表示 。 


确定 主机 后 ， 还 需要 说 明文 件 存 在 于 这 台 服 务 器 的 哪个 文件 夹 中 ， 这 里 文件 夹 可 以 分 为 
多 个 层级 。 

确定 文件 夹 后 ， 就 要 定位 到 文件 ， 即 要 显示 哪个 文件 ， 网 页 文件 通常 是 以 html 或 .htm 为 
扩展 名 。 


7.1.3” 超 链接 的 URL 类 型 


网 页 上 的 超 链接 一 般 分 为 3 种 ， 分 别 介绍 如 下 。 

(1) 绝对 URL 超 链 接 。URL 就 是 统一 资源 定位 符 ， 简 单 地 讲 就 是 网 络 上 的 一 个 站 点 、 网 
页 的 完整 路 径 。 

(2) 相对 URL 超 链 接 。 如 将 自己 网 页 上 的 某 一 段 文字 或 某 标题 链接 到 同一 网 站 的 其 他 网 
页 上 面 去 。 

(3) 书签 超 链接 。 同 一 网 页 的 超 链接 ， 这 种 超 链接 又 叫 作 书签 。 


7.2 建立 网 页 超级 链接 


超级 链接 就 是 当 鼠 标 单 击 一 些 文字 、 图 片 或 其 他 网 页 元 素 时， 浏览 器 就 会 根据 其 指示 载 
入 一 个 新 的 页 面 或 跳 转 到 页 面 的 其 他 位 置 。 超 级 链接 除了 可 以 链接 文本 外 ， 也 可 以 链接 各 种 
媒体 ， 如 声音 、 图 像 、 动 画 ， 通 过 它们 可 享受 丰富 多 彩 的 多 媒体 世界 。 

建立 超级 链接 所 使 用 的 HTML 标记 为 <a></a>。 超 级 链接 最 重要 的 有 两 个 要 素 ， 即 设置 为 
超级 链接 的 网 页 元 素 和 超级 链接 指向 的 目标 地 址 。 基 本 的 超级 链接 的 结构 如 下 : 


<a href=URL> 网 页 元 素 </a> 


7.2.1 案例 1 一 一 创建 超 文 本 链接 

文本 是 网 页 制作 中 使 用 最 频繁 也 是 最 主要 的 元 素 。 为 了 实现 跳 转 到 与 文本 相关 内 容 的 页 
面 ， 往 往 需要 为 文本 添加 链接 。 

1. 什么 是 文本 链接 

浏览 网 页 时 ， 会 看 到 一 些 带 下 画 线 的 文字 ， 将 鼠标 指针 移 到 文字 上 时 ， 鼠 标 指 针 将 变 成 
手 形 ， 单 击 会 打开 一 个 网 页 ， 这 样 的 链接 就 是 文本 链接 ， 如 图 7-2 所 示 。 

2. 创建 链接 的 方法 


使 用 <a> 标 签 可 以 实现 网 页 超 链接 ， 在 <a> 标 签 处 需要 定义 锚 来 指定 链接 目标 。 锚 (anchon) 
有 两 种 用 法 ， 分 别 介绍 如 下 。 

(1) 通过 使 用 href 属性 ， 创 建 指向 另外 一 个 文档 的 链接 (或 超 链接 )。 使 用 href 属性 的 代码 
格式 如 下 : 

<a href=" 链 接地 址 "> ABR LK</a> 
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7-2 ”存在 文本 链接 的 网 页 


(2) 通过 使 用 name 或 id 属性 ， 创 建 一 个 文档 内 部 的 书签 (也 就 是 说 ， 可 以 创建 指向 文档 
片段 的 链接 )。 使 用 name 属性 的 代码 格式 如 下 : 
<a name="value"> 便 姥 颖 藤 扩 交大 </a> 


name 属性 用 于 指定 锚 的 名 称 。name 属性 可 以 创建 (大 型 ) 文 档 内 的 书签 。 
使 用 id 属性 的 代码 格式 如 下 : 
<a id="value">@/@H#RAIICE</a> 


3. 创建 网 页 内 的 文本 链接 


创建 网 页 内 的 文本 链接 主要 使 用 href 属性 来 实现 。 比 如 ， 在 网 页 中 做 一 些 知 名 网 站 的 友 
情 链接 。 
【 例 7.1】 使 用 记事 本 创建 网 页 超 文 本 链接 (案例 文件 ，ch07\7.1.html)。 


<!DOCTYPE html> 

<html> 

<head> 

<title> 文 本 链接 </title> 

</head> 

<body> - o x 
友情 链接 ©) CAUsers\adminstron O ~ È | © scat 
<a href="http://www.baidu.com"> 百 度 </a> 文件 (月 RAO SEV A) IAT) MANH 
<a href="http://www.sina.com.cn"> 新 浪 </a> 友情 链接 一 一 一 一 $ 新 浪 BE 

<a href="http://www.163.com"> 网 易 </a> 

</body> 

</html> 

使 用 正 11.0 打开 文件 预览 ， 效 果 如 图 7-3 所 图 7-3 “创建 的 文本 链接 网 页 效果 


示 ， 带 有 超 链 接 的 文本 呈现 浅 蓝 色 。 
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7.2.2 ”案例 2 一 一 创建 图 片 链接 


在 网 页 中 浏览 内 容 时 ， 若 将 鼠标 指针 移动 到 图 片上 ， 鼠 标 指针 将 变 成 手 形 ， 单 击 会 打开 


一 个 网 页 ， 这 样 的 链接 就 是 图 片 链接 ， 如 图 7-4 所 示 。 





链接 地 址 前 的 “http://” 不 可 省 略 ， 否 则 链接 会 出 现 错误 提示 。 
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图 7-4 存在 图 片 链接 的 网 页 


使 用 <a> 标 签 为 图 片 添加 链接 的 代码 格式 如 下 : 


<a href=" 链 接 目标 "><img src=" 图 片 "/></a> 


【 例 7.2】 使 用 记事 本 创建 网 页 图 片 链接 (案例 文件 : ch07\7.2.html)。 


<!DOCTYPE html> 

<html> 

<head> 

<title> 图 片 链接 </title> 

</head> 

<body> 

音乐 无 限 

<a href="mp3.html"><img src="1.jpg"/></a> 
<br> 

<br> 

<br> 

运动 健身 

<a href="tiyu-html"><img src="2.jpg"/></a> 
</body> 

</html> 


使 用 TE 11.0 打开 文件 预览 ， 效 果 如 图 7-5 所 示 ， 鼠 标 指针 放 在 图 片上 呈现 手指 状 ， 单 击 


后 可 以 跳 转 到 指定 网 页 。 
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7-5 创建 的 图 片 链接 网 页 效果 


文件 中 的 图 片 要 和 当前 网 页 文件 在 同一 目录 下 ， 链 接 的 网 页 没有 加 “httpy/”， 
SS 默认 为 当前 网 页 所 在 目录 。 


7.2.3 ”案例 3 一 一 创建 下 载 链接 


超 链接 <a> 标 记 href 属性 是 指向 链接 的 目标 ， 目 标 可 以 是 各 种 类 型 的 文件 ， 如 图 片 文件 、 
声音 文件 、 视 频 文件 、Word 等 。 如 果 是 浏览 器 能 够 识别 的 类 型 ， 会 直接 在 浏览 器 中 显示 。 如 
果 是 浏览 器 不 能 识别 的 类 型 ， 在 E 浏览 器 中 会 弹出 文件 下 载 对 话 框 ， 如 图 7-6 所 示 。 


Internet Explorer X 





要 对 2.doc 执行 什么 操作 ? 
大 小 10.5 KB 

S: Micr 
来 源 : CU: 





ft Word 97 - 2003 
Nadminstror\Documents\ 漂 代码 \ch07 





> HRO) 
FEDERI, 


> 保存 (5) 


> BAIA) 











7-6 IE 中 的 文件 下 载 对 话 框 
【 例 7.3】 创 建 下 载 链接 (案例 文件 ，ch07\7.3.html)。 


<!DOCTYPE html> 
<html> 





<head> 
<title> 链 接 各 种 类 型 文件 </title> 


= 口 x 














</head> E CAUsers\adminstron O ~ © | S mennan 
<body> SHO RO FEV SERA IAM WMH 
<p><a href="2 .doc"> 链 接 word 文档 </a></p> 链接 word 文 档 

</body> 

</html> 

在 正 11.0 中 预览 ,效果 如 图 7-7 所 示 。 实 现 链 图 7-7 链接 Word 文档 


Os 


接 到 html 文件 、 图 片 和 Word 文档 。 


7.2.4 案例 4 一 一 使 用 相对 路 径 和 绝对 路 径 


绝对 URL 一 般 位 于 访问 非 同一 台 服 务 器 上 的 资源 ， 相 对 URL 是 指 访问 同一 台 服 务 器 上 
相同 文件 夹 或 不 同文 件 夹 中 的 资源 。 如 果 访 问 相 同文 件 夹 中 的 文件 ， 只 需要 写 文件 名 ; 如 果 
访问 不 同文 件 夹 中 的 资源 ，URL 以 服务 器 的 根 目录 为 起 点 ， 指 明文 档 的 相对 关系 ， 由 文件 夹 
名 和 文件 名 两 个 部 分 构成 。 

【 例 7.4】 使 用 绝对 URL 和 相对 URL 实现 超 链接 (案例 文件 :ch07\7.4.html)。 


<!DOCTYPE html> 
<html> 
<head> 
<title> 绝 对 URL 和 相对 URL</title> 
</head> 
<body> 
单 击 <a href="http://www.webDesign.com/index.html"> 绝 对 URL</a> 链 接 到 
webDesign 网 站 首页 <br /> 
单 击 <a href="02.html"> 相 同文 件 夹 的 URL</a> 链 接 到 相同 文件 夹 中 的 第 2 个 页 面 <br /> 
单 击 <a href="../pages/03.html"> 不 同文 件 夹 的 URL</a> 链 接 到 不 同文 件 夹 中 的 第 3 个 页 面 
</body> 
</html> 


在 上 述 代码 中 ， 第 1 个 链接 使 用 的 是 绝对 URL: 第 2 个 使 用 的 是 服务 器 相对 URL， 也 就 
是 链接 到 文档 所 在 服务 器 的 根 目录 下 的 02.html 文件 ， 第 3 个 使 用 的 是 文档 相对 URL， 即 原 
文档 所 在 文件 夹 的 父 文件 夹 下 面 的 pages 文件 夹 中 的 03.html 文件 。 

在 正 11.0 中 预览 ， 效 果 如 图 7-8 所 示 。 
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图 7-8 绝对 URL 和 相对 URL 


7.2.5 RA 5 一 一 设置 以 新 窗口 显示 超 链 接 页 面 


在 默认 情况 下 ， 当 单 击 超 链接 时 ， 目 标 页 面 会 在 当前 窗口 中 显示 ， 蔡 换 当前 页 面 的 内 
容 。 如 果 要 在 单 击 某 个 链接 以 后 ， 打 开 一 个 新 的 浏览 器 窗口 在 这 个 新 窗口 中 显示 目标 页 面 ， 
就 需要 使 用 <a> 标 签 的 target 属性 。 

target 属性 的 代码 格式 如 下 : 

<a target="value"> 

AEH, value 有 4 个 参数 可 用 ， 这 4 个 保留 的 目标 名 称 用 作 特 殊 的 文档 重 定向 操作 。 

(1) _blank。 浏 览 器 总 在 一 个 新 打开 、 未 命名 的 窗口 中 载 入 目标 文档 。 
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(2) _self。 这 个 目标 的 值 对 所 有 没有 指定 目标 的 <a> 标签 是 默认 目标 ， 它 使 得 目标 文档 
载 入 并 显示 在 相同 的 框架 或 者 窗口 中 作为 源 文档 。 这 个 目标 是 多 余 且 不 必要 的 ， 除 非 和 文档 
标题 <base> 标签 中 的 target 属性 一 起 使 用 。 

(3) _parent。 这 个 目标 使 得 文档 载 入 父 窗口 或 者 包含 在 超 链接 引用 的 框架 的 框架 集 。 如 果 
这 个 引用 是 在 窗口 或 者 项 级 框架 中 ， 那 么 它 与 目标 _self 等 效 。 

(4) _top。 这 个 目标 使 得 文档 载 入 包含 这 个 超 链接 的 窗口 ， 用 _top 目标 将 会 清除 所 有 被 包 
含 的 框架 并 将 文档 载 入 整个 浏览 器 窗口 。 

【 例 7.5】 设 置 以 新 窗口 显示 超 链接 页 面 (案例 文件 : ch07\7.5.html)。 


<!DOCTYPE html> 











<html> = UX 
<head> @ E csersadminstron P ~ © || S gene x| 
<title> 设 置 链接 目标 </title> am SAE SEV) RERA IAM RMH) 
</head> 

<body> 


<a href="http://www.baidu.com" 
target=" blank"> 百 度 </a> 


</body> = 
</html> 图 7-9 制作 网 页 超 链接 


使 用 TE 11.0 打开 网 页 文件 ， 显 示 效 果 如 图 7-9 所 示 。 

单 击 网 页 中 的 超 链 接 ， 在 新 窗口 中 打开 链接 页 面 ， 如 图 7-10 所 示 。 

如 果 将 _blank 换 成 self， 即 代码 修改 为 “<a href="http:/Avww.baidu.com" target="_self"> H 
度 </a>”， 单 击 链接 后 ， 则 直接 在 当前 窗口 中 打开 新 链接 ， 如 图 7-11 所 示 。 
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图 7-10 在 新 窗口 中 打开 链接 网 页 图 7-11 在 当前 窗口 中 打开 链接 网 页 


DITI target 的 4 个 值 都 以 下 画 线 开 始 。 任 何其 他 用 一 个 下 画 线 作为 开头 的 窗口 或 
\ 者 目标 都 会 被 浏览 器 忽略 。 因 此 ， 不 要 将 下 画 线 作为 文档 中 定义 的 任何 框架 name 
或 id 的 第 一 个 字符 。 


7.2.6 ”案例 6 一 一 设置 电子 邮件 链接 


在 某 些 网 页 中 ， 当 访问 者 单 击 某 个 链接 以 后 ， 会 自动 打开 电子 邮件 客户 端 软件 ， 如 
Onutlook 或 Foxmail 等 ， 向 某 个 特定 的 E-mail 地 址 发 送 邮 件 ， 这 个 链接 就 是 电子 邮件 链接 。 电 


e 
its 


子 邮 件 链接 的 格式 如 下 : 
<a href="mailto: 电 子 邮 件 地 址 ”> 网 页 元 素 </a> 


【 例 7.6】 设 置 电子 邮件 链接 (案例 文件 : chO7\7.6.html). 


<!DOCTYPE html> 
<html> 

<head> 

<title> 电 子 邮件 链接 </title> 

</head> 

<body> 

<img src="images/logo.gif" width="119" height="49"> [免费 注册 ] [登录 ] 
<a href="mailto:kfdzsj@126.com"> 站 长 信箱 </a> 

</body> 

</html> SN 


在 正 11.0 中 预览 网 页 ， 效 果 如 图 7-12 所 示 ， 实 现 了 电子 邮件 链接 。 
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图 7-12 ”链接 到 电子 邮件 


当 读者 单 击 “ 站 长 信箱 ”链接 时 ， 会 自动 弹出 Outlook 窗口 ， 要 求 编写 电子 邮件 ， 如 
图 7-13 所 示 。 
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7-143 Outlook 新 邮件 窗口 


7.3 Rll 7 一 一 浮动 框架 iframe 的 使 用 


HTML 5 中 已 经 不 支持 frameset 框架 ， 但 是 它 仍然 支持 iframe 浮动 框架 的 使 用 。 浮 动 框 
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架 可 以 自由 控制 窗口 大 小 ， 还 可 以 配合 表格 随意 地 在 网 页 中 的 任何 位 置 插入 窗口 。 实 际 上 就 
是 在 窗口 中 再 创建 一 个 窗口 。 

使 用 iframe 创建 浮动 框架 的 格式 如 下 : 

<iframe src=" 链 接 对 象 ”> 


其 中 ，src 表示 浮动 框架 中 显示 对 象 的 路 径 ， 可 以 是 绝对 路 径 ， 也 可 以 是 相对 路 径 。 例 
如 ， 下 面 的 代码 是 在 浮动 框架 中 显示 百度 网 站 。 
【 例 7.7】 使 用 浮动 框架 (案例 文件 : ch07\7.7.html)。 


<!DOCTYPE html> 
<html> 
- 0 x 








<head> E CUsersadminsron D ~ O | S FIESTAR. 


<title> 浮 动 框架 中 显示 百度 网 站 </title> lea REO SEV GERA IAM MBH 





</head> 

<body> 

<iframe src="http://www.baidu.com"></iframe> 
</body> 

</html> 








EIE 11.0 中 预览 网 页 ， 效 果 如 图 7-14 所 示 。 从 预览 结 
果 可 见 ， 浮 动 框架 在 页 面 中 又 创建 了 一 个 窗口 。 在 默认 情况 图 7-14 浮动 框架 效果 
下 ， 浮 动 框架 的 尺寸 为 220 像素 x120 像素 。 

如 果 需 要 调整 浮动 框架 尺寸 ， 请 使 用 CSS 样式 。 修 改 上 述 浮动 框架 尺寸 ， 请 在 head 标记 
部 分 增加 如 下 CSS 代码 : 


<style> 

iframe{ 
width: 600px; // 宽 度 
height:800px; ”// 高 度 
border:none; // 无 边框 

} 

</style> 


H IE 11.0 中 预览 网 页 ， 效 果 如 图 7-15 所 示 。 
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7-15 ”修改 尺寸 的 浮动 框架 


Oi 


在 HIML 5 中 ，iframe 仅 支 持 sre 属性 ， 再 无 其 他 属性 。 
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7.4 综合 案例 一 一 使 用 锚 链 接 制作 电子 书 阅读 网 页 


超 链接 除了 可 以 链接 特定 的 文件 和 网 站 之 外 ， 还 可 以 链接 到 网 页 内 的 特定 内 容 。 这 可 以 
使 用 <a> 标 签 的 name 或 id 属性， 创建 一 个 文档 内 部 的 书签 ， 也 就 是 说 ， 可 以 创建 指向 文档 片 
段 的 链接 。 

例如 ， 使 用 以 下 命令 可 以 将 网 页 中 的 文本 “你 好 ”定义 为 一 个 内 部 书签 ， 书 签名 称 为 


Damel。 
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<a name="namel" > 你 好 </a> 

在 网 页 中 的 其 他 位 置 可 以 插入 超 链 接 引 用 该 书签 ， 引 用 命令 如 下 : 
<a href="#namel" > 引用 内 部 书签 </a> 

通常 网 页 内 容 比 较 多 的 网 站 会 采用 这 种 方法 ， 如 一 个 电子 书 网 页 。 


下 面 使 用 锚 链接 制作 一 个 电子 书 网 页 。 
新 建 记事 本 ， 输 入 以 下 代码 ， 并 保存 为 电子 书 .html 文件 。 


<!DOCTYPE html> 
<html> 

<head> 
<title> 电 子 书 </title> 
</head> 


<body > 
<h1> 文 学 鉴赏 </h1> 
<ul> 
<li><a href="# 第 一 篇 ”> 再 别 康桥 </a> 
<li><a href="# 第 二 篇 " >i 埠 </a> 
<li><a href="# 第 三 篇 " > 荷塘 月 色 </a> 
</ul> 
<h3><a name=" 第 一 篇 ”> 再 别 康桥 </a></h3> 
<h3><a name=" 第 二 篇 " > 雨 #</a></h3> 
<h3><a name=" 第 三 篇 " > 荷塘 月 色 </a></h3> 








</body> 
</html> 
SED 使 用 IE 11.0 打开 文件 ， 显 示 效果 如 图 7-16 所 示 。 
E) cAUsersadminsron O ~ Ó| S F5 
XHA S80 BEM see IAM #2) 
文学 鉴赏 a 
> Balm 
‘he 
- HBAS 
再 别 康桥 y 





7-16 ”电子 书 网 页 
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为 每 一 个 文学 作品 添加 内 容 ， 完 善后 的 代码 如 下 。 


<!DOCTYPE html> 
<html> 
<head> 
<title> 电 子 书 </title> 
</head> 
<body > 
<h1> 文 学 鉴 党 </h1> 
<ul> 
<li><a href="# 第 一 篇 ”> 再 别 康桥 </a> 
<li><a href="# 第 二 篇 " >W 巷 </a> 
<li><a href="# 第 三 篇 " > 荷塘 月 色 </a> 
</ul> 
<h3><a name=" 第 一 篇 ”> 再 别 康桥 </a></h3> 
一 一 徐 志摩 
<ul> 
<1i> 轻 轻 的 我 走 了 ， 正 如 我 轻 轻 的 来 ; 
<1i> 我 轻 轻 的 招手 ， 作 别 西天 的 云彩 。 
<br> 
<1i> 那 河畔 的 金 柳 ， 是 夕阳 中 的 新 娘 ; 
<1i> 波 光 里 的 艳 影 ， 在 我 的 心头 荡 澜 。 
<br> 
<1i> 软 泥 上 的 青 荐 ， 油 油 的 在 水 底 招摇 ; 
<1i> 在 康 河 的 柔 波 里 ， 我 甘心 做 一 条 水 草 ! 
<br> 
<1i> 那 榆 萌 下 的 一 潭 ， 不 是 清泉 ， 是 天 上 虹 ; 
<1i> 揉 碎 在 浮 藻 间 ， 沉 淀 着 彩虹 似 的 梦 。 
<br> 
<1i> 寻 梦 ? 撑 一 支 长 篇 ， 向 青草 更 青 处 漫 淹 ; 
<1i> 满 载 一 船 星 辉 ， 在 星 辉 斑 澜 里 放歌 。 
<br> 
<1i> 但 我 不 能 放歌 ， 悄 悄 是 别离 的 笔 第 ; 
<1i> 夏 虫 也 为 我 沉默 ， 沉 默 是 今 晚 的 康桥 ! 
<br> 
<1i> 悄 悄 的 我 走 了 ， 正 如 我 悄悄 的 来 ; 
<1i> 我 挥 一 挥 衣 袖 ， 不 带 走 一 片 云彩 。 
</ul> 
<h3><a name=" 第 二 篇 ”> 雨 埠 </a></h3> 
一 一 戴 望 千 <br> 
接着 油纸 伞 ， 独 自 入 香 在 悠长 、 悠 长 又 寂寥 的 雨 蔡 ， 我 希望 逢 着 一 个 丁香 一 样 的 结 着 悉 怨 的 姑娘 。 
<br> 
RATE -HNRE, TERS, TERE, MPR, RNG; WER 
SHIM, HARPER, RRA Ta, UR, Be, SUK. <br> 
她 静默 地 走 近 ， 走 近 ， 又 投 出 太 息 一 般 的 眼光 ， 她 飘 过 像 梦 一 般 地 姜 婉 迷茫 。 像 梦 中 飘 过 一 枝 丁 香 的 ， 
我 身 旁 飘 过 这 女郎 ， 她 静默 地 远 了 ， 远 了 ， 到 了 矣 二 的 篇 墙 ， 走 尽 这 雨 起。 在 雨 的 哀 曲 里 ， 消 了 她 的 颜 
色 ， 散 了 她 的 芬芳 ， 消 散 了 ， 甚 至 她 的 太 息 般 的 眼光 丁香 般 的 届 败 。 撑 着 油纸 全 ， 独 自 仿 香 在 悠长 ， 悠 
长 又 寂 密 的 雨 埠 ， 我 希望 际 过 一 个 丁香 一 样 的 结 着 悉 怨 的 姑娘 。 
<h3><a name=" 第 三 篇 " > 荷塘 月 色 </a></h3> 
曲 曲 折 折 的 荷塘 上 面 ， 弥 望 的 是 田 田 的 叶子 。 叶 子 出 水 很 高 ， 像 亭 享 的 舞女 的 裙 。 层 层 的 叶子 中 间 ， 零 
星 地 点 绥 着 些 白花 ， 有 疲 娜 地 开 着 的 ， 有 羞涩 地 打 着 采 儿 的 ; 正如 一 粒 粒 的 明珠 ， 又 如 怕 天 里 的 星星 ， 
又 如 刚 出 浴 的 美人 。 微 风 过 处 ， 送 来 缕缕 清香 ， 仿 佛 远 处 高 楼 上 渺 甘 的 歌声 似 的 。 这 时 候 叶 子 与 花 也 有 
一 丝 的 颤动 ， 像 办 电 般 ， 去 时 传 过 荷塘 的 那 边 去 了 。 叶 子 本 是 肩 并 肩 密 密 地 挨 着 ， 这 便 宛 然 有 了 一 道 凝 
拆 的 波 痕 。 叶 子 底下 是 脉 脉 的 流水 ， 遮 住 了 ， 不 能 见 一 些 颜色 ; 而 叶子 却 更 见 风 致 了 。<br> 


月 光 如 流水 一 般 ， 静 静 地 演 在 这 一 片 叶子 和 花 上 。 薄 薄 的 青 雾 浮 起 在 荷塘 里 。 叶 子 和 花 仿佛 在 牛乳 中 洗 
过 一 样 ， 又 像 笼 着 轻 纱 的 梦 。 虽 然 是 满月 ， 天 上 却 有 一 层 淡 淡 的 云 ， 所 以 不 能 朗 照 ; 但 我 以 为 这 恰 是 到 
了 好 处 一 一 醋 眠 固 不 可 少 ， 小 睡 也 别有风味 的 。 月 光 是 隔 了 树 照 过 来 的 ， 高 处 从 生 的 灌木 ， 落 下 参差 的 
斑 驱 的 黑 影 ， 峭 楞 楞 如 鬼 一 般 ;， 弯 弯 的 杨柳 的 稀疏 的 倩影 ， 却 又 像 是 画 在 荷 叶 上 。 塘 中 的 月 色 并 不 均 
匀 ;， 但 光与影 有 着 和 谐 的 旋律 ， 如 梵 姻 玲 上 奏 着 的 名 曲 。 

</body> 

</html> 


CIID 保存 文件 ， 使 用 IE 11.0 打开 文件 ， 效 果 如 图 7-17 所 示 。 
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图 7-17 添加 网 页 内 容 
EID 单 击 “两 埠 ” 超 链接 ， 页 面 会 自动 跳 转 到 “ 雨 埠 ”对 应 的 内 容 ， 如 图 7-18 所 示 。 
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曲 曲折 折 的 荷塘 上 面 ， 弥 望 的 星 田 田 的 叶子 。 叶 子 出 水 很 高 ， 像 享 享 的 舞 
女 的 裙 。 层 层 的 叶子 中 间 ， 堆 星 地 点 综 着 些 白花 ， 有 间 哪 地 开 着 的 ， 有 羡 梁 地 
打 着 杂 儿 的 ; 正如 一 粒 粒 的 明珠 ， 又 如 碧 天 里 的 星星 ， 义 如 刚 出 治 的 美人 。 微 
风 过 处 ， 送 来 绩 绪 清香 ， 仿 佛 远 处 高 楼 上 涨 靳 的 歌声 似 的 。 REENT 
有 一 丝 的 晤 动 ， 像 闪电 般 ， 委 时 传 过 从 塘 的 那 边 去 了。 叶子 本 是 户 并 房 密 客 地 
RE, Ree T MEEA. 叶子 底下 是 脉 脉 的 流水 ， 庶 住 了 ， 不 能 y 
见 一 些 颜色 ;而 | 更 见 风 致 了 
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75 高 手 解 惑 


疑问 1: 在 创建 超 链接 时 ， 使 用 绝对 URL 还 是 相对 URL? 


答 : 在 创建 超 链 接 时 ， 如 果 要 链接 的 是 另外 一 个 网 站 中 的 资源 ， 需 要 使 用 完整 的 绝对 
URL; 如 果 在 网 页 中 创建 内 部 链接 ， 一 般 使 用 相对 于 当前 文档 或 站 点 根 文件 夹 的 相对 URL。 


疑问 2: 链接 增多 后 的 网 站 ， 如 何 设置 目录 结构 以 方便 维护 ? 


答 : 当 一 个 网 站 的 网 页 数量 增加 到 一 定 程度 以 后 ， 网 站 的 管理 与 维护 将 变 得 非常 烦琐 。 
因此 ， 掌 握 一 些 网 站 管理 与 维护 的 技术 是 非常 实用 的 ， 可 以 节省 很 多 时 间 。 建 立 适合 的 网 站 
文件 存储 结构 ， 可 以 方便 网 站 的 管理 与 维护 。 通 常 使 用 的 3 种 网 站 文件 组 织 结构 方案 及 文件 
管理 遵循 的 原则 如 下 。 

(1) 按照 文件 的 类 型 进行 分 类 管理 。 将 不 同类 型 的 文件 放 在 不 同 的 文件 夹 中 ， 这 种 存储 方 
法 适合 于 中 小 型 网 站 ， 这 种 方法 是 通过 文件 的 类 型 对 文件 进行 管理 。 

(2) 按照 主题 对 文件 进行 分 类 。 网 站 的 页 面 按照 不 同 的 主题 进行 分 类 储存 。 同 一 主题 的 所 
有 文件 存放 在 一 个 文件 夹 中 ， 然 后 再 进一步 细 分 文件 的 类 型 。 这 种 方案 适用 于 页 面 和 文件 数 
量 众多 、 信 息 量 大 的 静态 网 站 。 

G) 对 文件 类 型 进行 进一步 细 分 存储 管理 。 这 种 方案 是 第 一 种 存储 方案 的 深化 ， 将 页 面 进 
一 步 细 分 后 进行 分 类 存储 管理 。 这 种 方案 适用 于 文件 类 型 复杂 、 包 含 各 种 文件 的 多 媒体 动态 
网 站 。 
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8.1 案例 1 一 一 认识 表单 


表单 主要 用 于 收集 网 页 上 浏览 者 的 相关 信息 。 其 标签 为 <form></form>。 表 单 的 基本 语法 
格式 如 下 : 


<form action="url" method="get|post" enctype="mime"></form> 


其 中 ，action="url" 指 定 处 理 提交 表单 的 格式 ， 它 可 以 是 一 个 URL 地 址 或 一 个 电子 邮件 地 
址 。method="get" 或 "post" 指 明 提 交 表 单 的 HTTP 方法 。enctype="mime" 指 明 用 来 把 表单 提交 
给 服务 器 时 的 互联 网 媒体 形式 。 

表单 是 一 个 能 够 包含 表单 元 素 的 区 域 。 通 过 添加 不 同 的 表单 元 素 ， 将 显示 不 同 的 效果 。 

【 例 8.1】 认 识 表单 (案例 文件 ，ch08\8.1.html)。 


<!DOCTYPE html> 
<html> 
<head></head> 
<body> 
<form> 
下 面 是 输入 用 户 登 录 信 息 
<br> 
用 户 名 称 
<input type="text" name="user"> 
<br> 
用 户 密码 
<input type="password" name="password"><br> 
<input type="submit" value=" 登 录 "> 
</form> 
</body> 
</html> 


在 下 11.0 中 浏览 ， 效 果 如 图 8-1 所 示 ， 可 以 看 到 用 户 登录 信息 页 面 。 
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下 面 是 输入 用 户 登录 信息 
用 户 名 称 














用 户 密码 
登录 











81 ”用 户 登录 窗口 


8.2 ”表单 基本 元 素 的 使 用 


表单 元 素 是 能 够 让 用 户 在 表单 中 输入 信息 的 元 素 。 常 见 的 有 文本 框 、 单 选 按 钮 、 复 选 
框 、 列 表 框 等 。 下 面 主要 讲解 表单 基本 元 素 的 使 用 方法 和 技巧 。 


Dd 
Oz 


8.2.1 案例 2 一 一 单行 文本 输入 框 text 


文本 框 是 一 种 让 访问 者 自己 输入 内 容 的 表单 对 象 ， 通 常 被 用 来 填写 单个 字 或 者 简短 的 回 
答 ， 如 用 户 姓名 和 地 址 等 。 
代码 格式 如 下 : 


<input type="text" name="..." size="..." maxlength="..." value=".. 


其 中 ，type="text" 定 义 单行 文本 输入 框 。name 属性 定义 文本 框 的 名 称 ， 要 保证 数据 的 准 
确 采 集 ， 必 须 定 义 一 个 独一无二 的 名 称 。size 属性 定义 文本 框 的 宽度 ， 单 位 是 单个 字符 宽 
度 。maxlength 属性 定义 最 多 输入 的 字符 数 。value 属性 定义 文本 框 的 初始 值 。 

【 例 8.2】 使 用 单行 文本 输入 框 (案例 文件 : ch08\8.2.html)。 


<!DOCTYPE html> 
<html> 
<head><title> 输 入 用 户 的 姓名 </title></head> 
<body> 
<form> 


请 输入 您 的 姓名 : 


<input type="text" name="yourname" size="20" maxlength="15"> 


请 输入 您 的 地 址 : 

<input type="text" name="youradr" size="20" maxlength="15"> 
</form> 
</body> 
</html> 


在 正 11.0 中 浏览 ， 效 果 如 图 8-2 所 示 ， 可 以 看 到 两 个 单行 文本 输入 框 。 
= o x 
E) CAUsers\adminstron O ~ C | GSA mPa = 
xe RSE SEV) CERA IAM WMH 


请 输入 您 的 姓名 : 


请 输入 您 的 地 址 : 


Ales 
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图 8-2 单行 文本 输入 框 


8.2.2 ”案例 3 一 一 多 行文 本 输入 框 textarea 
多 行文 本 输入 框 (textarea) 主 要 用 于 输入 较 长 的 文本 信息 。 其 代码 格式 如 下 : 


<textarea name="..." cols="..." rows="..." wrap="..."></textarea> 

其 中 ，name 属性 定义 多 行文 本 框 的 名 称 ， 要 保证 数据 的 准确 采集 ， 必 须 定义 一 个 独 一 无 
二 的 名 称 。cols 属性 定义 多 行文 本 框 的 宽度 ， 单 位 是 单个 字符 宽度 。rows 属性 定义 多 行文 本 
框 的 高 度 ， 单 位 是 单个 字符 宽度 。wrap 属性 定义 输入 内 容 大 于 文本 域 时 显示 的 方式 。 

【 例 8.3】 使 用 多 行文 本 输入 框 (案例 文件 : ch08\8.3.html). 
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<!DOCTYPE html> 
<html> 


<head><title> 多 行文 本 输入 </title></head> 
<body> 
<form> 
请 输入 您 最 新 的 工作 情况 <br> 
<textarea name="yourworks" cols ="50" rows = "5"></textarea> 
<br> 
<input type="submit" value=" 提 交 "> 
</form> 
</body> 
</html> 
在 下 11.0 中 浏览 ， 效 果 如 图 8-3 所 示 ， 可 以 看 到 多 行文 本 输入 框 。 
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请 输入 您 最 新 的 工作 情况 











图 8-3 ”多 行文 本 输入 杠 


8.2.3 ”案例 4 一 一 密码 域 password 


密码 输入 框 是 一 种 特殊 的 文本 域 ， 主 要 用 于 输入 一 些 保密 信息 。 当 网 页 浏览 者 输入 文本 
时 ， 显 示 的 是 黑 点 或 者 其 他 符号 ， 这 样 就 增加 了 输入 文本 的 安全 性 。 其 代码 格式 如 下 : 


<input type="password" name="..." size="..." maxlength="..."> 


其 中 type="password" 定 义 密码 框 。name 属性 定义 密码 框 的 名 称 ， 要 保证 唯一 性 。size 属 
性 定义 密码 框 的 宽度 ， 单 位 是 单个 字符 宽度 。maxlength 属性 定义 最 多 输入 的 字符 数 。 
【 例 8.4】 使 用 密码 域 (案例 文件 ch08\8.4.html)。 


<!DOCTYPE html> 

<html> 

<head><title> 输 入 用 户 姓名 和 密码 </title></head> 
<body> 

<form> 

用 户 姓名 : 

<input type="text" name="yourname"> 

<br> 

登录 密码 : 

<input type="password" name="yourpw"><br> 
</form> 

</body> 

</html> 


在 正 11.0 中 浏览 效果 如 图 8-4 所 示 。 输 入 用 户 名 和 密码 时 ， 可 以 看 到 密码 以 黑 点 的 形 
式 显 示 。 如 果 想 查看 输入 的 登录 密码 ， 可 以 单 击 眼睛 图 标 令 ， 即 可 显示 输入 的 具体 密码 。 
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用 户 姓名 : lele 
登录 密码 ; 








BHR SIWIHSe ew A 


图 8-4 密码 输入 框 
8.2.4 案例 5 一 一 单 选 按钮 radio 
单 选 按钮 主要 是 让 网 页 浏览 者 在 一 组 选项 里 只 能 选择 一 个 。 其 代码 格式 如 下 : 


<input type="radio" name="" value=""> 


其 中 ，type="radio" 定 义 单 选 按钮 。name 属性 定义 单 选 按钮 的 名 称 ， 单 选 按钮 都 是 以 组 为 
单位 使 用 的 ， 在 同一 组 中 的 单 选 按钮 都 必须 用 同一 个 名 称 。value 属性 定义 单 选 按钮 的 值 ， 在 
同一 组 中 ， 它 们 的 域 值 必 须 是 不 同 的 。 

【 例 8.S】 使 用 单 选 按钮 (案例 文件 : ch08\8.5.html). 


<!DOCTYPE html> 

<html> 

<head><title> 选 择 感 兴趣 的 图 书 </title></head> 

<body> 

<form> 
请 选择 您 感 兴趣 的 图 书 类 型 : 
<br> 
<input type="radio" name="book" value="Book1"> 网 站 编程 <br> 
<input type="radio" name="book" value="Book2"> 办 公 软 件 <br> 
<input type="radio" name="book" value="Book3"> 设 计 软件 <br> 
<input type="radio" name="book" value="Book4"> 网 络 管理 <br> 
<input type="radio" name="book" value="Book5"> 黑 客 攻防 <br> 

</form> 

</body> 

</html> 


在 正 11.0 中 浏览 ， 效 果 如 图 8-5 所 示 。 可 以 看 到 5 个 单 选 按钮 ， 而 用 户 只 能 选中 其 中 一 
个 单 选 按钮 。 
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请 选择 您 感 兴趣 的 图 书 类 型 : 
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口 设计 软件 

口 网 络 管理 

口 黑客 攻防 








8-5 ” 单 选 按钮 


27® 





$ 128 


feg HTML 5 网 页 设计 


案例 课堂 (第 ?版 ) >… 





8.2.5 ”案例 6 一 一 复 选 框 checkbox 


复 选 框 主要 是 让 网 页 浏览 者 在 一 组 选项 里 可 以 同时 选择 多 个 选项 。 每 个 复 选 框 都 是 一 个 
独立 的 元 素 ， 都 必须 有 一 个 唯一 的 名 称 。 其 代码 格式 如 下 : 


<input type="checkbox" name="" value=""> 


其 中 type="checkbox" 定 义 复 选 框 。name 属性 定义 复 选 框 的 名 称 ， 在 同一 组 中 的 复 选 框 都 
必须 用 同一 个 名 称 。value 属性 定义 复 选 框 的 值 。 
【 例 8.6】 使 用 复 选 框 (案例 文件 :ch08\8.6.html)。 


<!DOCTYPE html> 

<html> 

<head><title> 选 择 感 兴趣 的 图 书 </title></head> 

<body> 

<form> 
请 选择 您 感 兴趣 的 图 书 类 型 : <br> 
<input type="checkbox" name="book" value="Book1"> 网 站 编程 <br> 
<input type="checkbox" name="book" value="Book2"> 办 公 软 件 <br> 
<input type="checkbox" name="book" value="Book3"> 设 计 软 件 <br> 
<input type="checkbox" name="book" value="Book4"> 网 络 管理 <br> 
<input type="checkbox" name="book" value="Book5" checked> 黑 客 攻防 <br> 


</form> 
</body> 
</html> 
= 
iss checked 属性 主要 用 来 设置 默认 选中 (OO er 
项 。 SA WEE) SEV) co) IAT WRH) 





在 IE 11.0 中 浏览 ， 可 以 看 到 5 个 复 选 框 ， 其 中 “ 黑 
客 攻 防 ” 复 选 框 被 默认 勾 选 。 同 时 ， 浏 览 者 还 可 以 勾 选 其 








他 复 选 框 。 效 果 如 图 8-6 所 示 。 加 黑客 攻防 
8.2.6 ”案例 7 一 一 列表 框 select E 


列表 框 主要 用 于 在 有 限 的 空间 里 设置 多 个 选项 。 列 表 框 既 可 以 用 作 单 选 ， 也 可 以 用 作 复 
选 。 其 代码 格式 如 下 : 


<select name="..." size="..." multiple> 
<option value="..." selected> 


es 
</select> 
其 中 size 属性 定义 列表 框 的 行 数 。name 属性 定义 列表 框 的 名 称 。multiple 属性 表示 可 以 


多 选 ， 如 果 不 设置 本 属性 ， 那 么 只 能 单 选 。value 属性 定义 列表 项 的 值 。selected 属性 表示 默 
认 已 经 选中 本 选项 。 


【 例 8.7】 使 用 列表 框 (案例 文件 : ch08\8.7.html)。 


<!DOCTYPE html> 
<html> 
<head><title> 选 择 感 兴趣 的 图 书 </title></head> 
<body> 
<form> 
请 选择 您 感 兴趣 的 图 书 类 型 : <br> 
<select name="fruit" size = "3" multiple> 
<option value="Book1"> 网 站 编程 
<option value="Book2"> 办 公 软 件 
<option value="Book3"> 设 计 软 件 
<option value="Book4"> 网 络 管理 
<option value="Book5"> 黑 客 攻防 
</select> 
</form> 
</body> 
</html> 


EIE 11.0 中 浏览 ， 效 果 如 图 8-7 所 示 。 可 以 看 到 列表 框 ， 其 中 显示 了 3 行 选项 ， 用 户 可 N 
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以 按 住 Ctrl 键 ， 选 择 多 个 选项 。 
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图 8-7 列表 框 的 效果 
8.2.7 案例 8 一 一 普通 按钮 button 
普通 按钮 用 来 控制 其 他 定义 了 处 理 脚 本 的 处 理工 作 。 其 代码 格式 如 下 : 


<input type="button" name="..." value="..." onClick="..."> 


其 中 type="button" 定 义 为 普通 按钮 。name 属性 定义 普通 按钮 的 名 称 。value 属性 定义 按钮 
的 显示 文字 。onClick 属性 表示 单 击 行为 ， 也 可 以 是 其 他 事件 ， 通 过 指定 脚本 函数 来 定义 按钮 
的 行为 。 

【 例 8.8】 使 用 普通 按钮 (案例 文件 : ch08\8.8.html). 

<!DOCTYPE html> 

<html/> 

<body/> 

<form/> 

点 击 下 面 的 按钮 ， 把 文本 框 1 的 内 容 拷贝 到 文本 框 2 中 : 

<br> 

文本 框 1: <input type="text" id="field1" value=" HTML 5 的 技巧 "> 
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<br> 
文本 框 2: <input type="text" id="field2"> 
<br> 
<input type="button" name="..." value="Hif#" onClick="document 
-getElementBylId('field2') .value=document 
-getElementBylId('fieldl') .value"> 
</form> 
</body> 
</html> 


在 正 11.0 中 浏览 ， 效 果 如 图 8-8 所 示 ， 单 击 “ 单 击 我 ”按钮 ， 即 可 实现 将 文本 框 1 中 的 
内 容 复制 到 文本 框 2 中 的 操作 。 





- o0 x 
E) C:\Users\adminstror’ O ~ C | @ CAUsers\adminstror.. 
文件 (月 RRO EEV) HERA IAT) EMH) 
one 把 文本 框 1 的 内 容 拷贝 到 文本 
EQ": 
文本 框 1: [学 习 HTML5 的 技巧 
文本 框 2: | 学 习 HTML5 的 技巧 



































图 8-8 单 击 “ 单 击 我 ”按钮 后 的 复制 效果 
8.2.8 ”案例 9 一 一 提交 按钮 submit 
提交 按钮 用 来 将 输入 的 信息 提交 到 服务 器 。 其 代码 格式 如 下 : 


<input type="submit" name="..." value="..."> 


其 中 type="submit" 定 义 为 提交 按钮 。name 属性 定义 提交 按钮 的 名 称 。value 属性 定义 按 
钮 的 显示 文字 。 通 过 提交 按钮 ， 可 以 将 表单 里 的 信息 提交 给 表单 中 action 所 指向 的 文件 。 
【 例 8.9】 使 用 提交 按钮 (案例 文件 : ch08\8.9.html)。 


<!DOCTYPE html> 
<html> 
<head><title> 输 入 用 户 名 信息 </title></head> 
<body> 
<form action="http://www.yinhangit.com/yonghu.asp" method="get"> 
请 输入 你 的 姓名 : 
<input type="text" name="yourname"> 
<br> 
请 输入 你 的 住址 : 
<input type="text" name="youradr"> 
<br> 
请 输入 你 的 单位 : 
<input type="text" name="yourcom"> 
<br> 


请 输入 你 的 联系 方式 : 
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<input type="text" name="yourcom"> | 二 ee 
<br> | =) 国 EAgaiduNetdiskDom O ~ © | Serzezee «|| 可 
<input type="submit" value=" 提 交 "> RA SAD SEV SFA IAM SAH 

g; rm> WAPOA. 

PE 请 输入 你 的 住址 : 
</body> 请 输入 你 的 单位 : 
</html> ina MERE AS. 
Bz 








在 正 11.0 中 浏览 ， 效 果 如 图 8-9 所 示 ， 输 入 内 容 
后 单 击 “提交 ”按钮 ， 即 可 将 表单 中 的 数据 发 送 到 指 
定 的 文件 。 


8.2.9 案例 10 一 一 重 置 按钮 reset 
重 置 按钮 又 称 为 复位 按钮 ， 用 来 重 置 表单 中 输入 的 信息 。 其 代码 格式 如 下 : 


<input type="reset" name="..." value="..."> 


其 中 ，type="reset" 定 义 复位 按钮 。name 属性 定义 复位 按钮 的 名 称 。value 属性 定义 按钮 
的 显示 文字 。 
【 例 8.10】 使 用 重 置 按钮 (案例 文件 ，ch08\8.10.html)。 


<!DOCTYPE html> 
<html> 
<body> 
<form> 
请 输入 用 户 名 称 : 
<input type='text'> 
<br/> 
请 输入 用 户 密码 : 
<input type='password'> 
<br> 
<input type="submit" value=" 登 录 "> 
<input type="reset" value=" 重 置 "> 
</form> 
</body> 
</html> 


在 TE 11.0 中 浏览 ， 效 果 如 图 8-10 所 示 ， 输 入 内 容 后 单 击 “ 重 置 ”按钮 ， 即 可 实现 将 表 
单 中 的 数据 清空 的 目的 。 


8-9 提交 按钮 
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- o x 
E) CAUsers\adminstror’ O ~ © | @ CAUsers\adminstror... 
文件 (F) SRE BBV) 收藏 夫 (A) IAM) 帮助 (H) 
请 输入 用 户 名 称 : 


请 输入 用 户 密码 : 
| Se || aE 
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83 ”表单 高 级 元 素 的 使 用 


除了 上 述 基 本 元 素 外 ，HTML 5 中 还 有 一 些 高 级 元 素 ， 包 括 url, email, time, number, 


range, required 等 。 


8.3.1 案例 11 一 一 url 属性 的 使 用 


url 属性 是 用 于 说 明 网 站 网 址 的 。 显 示 为 一 个 文本 字段 输入 URL 地 址 。 在 提交 表单 时 ， 
会 自动 验证 url 的 值 。 其 代码 格式 如 下 : 


<input type="url" name="userurl"/> 


另外 ， 用 户 可 以 使 用 普通 属性 设置 url 输入 框 。 例 如 ， 可 以 使 用 max 属性 设置 其 最 大 
值 、min 属性 设置 其 最 小 值 、step 属性 设置 合法 的 数字 间隔 ， 利 用 value 属性 规定 其 默认 值 。 
对 于 另外 的 高 级 属性 中 同样 的 设置 不 再 重复 讲述 。 

【 例 8.11) url 属性 的 使 用 (案例 文件 : chO8\8.11 html). 





<!DOCTYPE html> 
<html> 
<body> 
<form> 
<br/> 
请 输入 网 址 : 
<input type="url" name="userurl"/> 
</form> 
</body> 
</html> 


在 下 11.0 中 浏览 ， 效 果 如 图 8-11 所 示 ， 用 户 即 可 输入 相应 的 网 址 。 


~ a x 
[E CAUsers\adminstrort O ~ © || E cAUsers\adminstror.. 
Sef RRO FEV URAA IAM #DH 


请 输入 网 址 : [www. baidu. com x 














8-11 url 属性 的 效果 


8.3.2 ”案例 12 一 一 email 属性 的 使 用 


与 url 属性 类 似 ，email 属性 用 于 让 浏览 者 输入 E-mail 地 址 。 在 提交 表单 时 ， 会 自动 验证 
email 域 的 值 。 其 代码 格式 如 下 : 


<input type="email" name="user_email"/> 
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【 例 8.12) email 属性 的 使 用 (案例 文件 : ch08\8.12.htmD 。 


<!DOCTYPE html> 
<html> 
<body> 
<form> 
<br/> 
请 输入 您 的 邮箱 地 址 : 
<input type="email" name="user email"/> 
<br> 
<input type="submit" value=" 提 交 "> 
</form> 
</body> 
</html> 


在 IE 11.0 中 浏览 ， 效 果 如 图 8-12 所 示 ， 用 户 即 可 输入 相应 的 邮箱 地 址 。 如 果 用 户 输入 


的 邮箱 地 址 不 合法 ， 单 击 “ 提 交 ” 按 钮 后 ， 会 弹出 提示 信息 。 





©) CNUsersvedminstron O ~ © | @ C:\Users\adminstror... X 


文件 (月 RRE EEV) 收藏 夫 (A) IAT) 帮助 (H) 


口 


X 





请 输入 您 的 邮箱 地 址 ; 








提交 














你 必须 输入 有 效 电 子 邮 件 地 址 











图 8-12 email 属性 的 效果 


8.3.3 ”案例 13 一 一 date 和 time 属性 的 使 用 
在 HTML 5 中 ， 新 增 了 一 些 日 期 和 时 间 输 入 类 型 ， 包 括 date、datetime、datetime-local、 


month, week 和 time。 它 们 的 具体 含义 如 表 8-1 所 示 。 


表 8-1 HTML 5 中 新 增 的 一 些 日 期 和 时 间 属 性 

















属 性 含义 
date 选取 日 、 月 、 年 
month 选取 月 、 年 
week 选取 周 和 年 
time 选取 时 间 
datetime 选取 时 间 、 日 、 月 、 年 
datetime-local 选取 时 间 、 日 、 月 、 年 (本 地 时 间 ) 


上 述 属性 的 代码 格式 彼此 类 似 ， 以 date 属性 为 例 ， 其 代码 格式 如 下 : 


<input type="date" name="user date" /> 


eumeswinme aes OO 





My 
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【 例 8.13】date 属性 的 使 用 (案例 文件 : ch08\8.13.html)。 


<!DOCTYPE html> 











<html> 
<body> 
<form> 
<br/> 
请 选择 购买 商品 的 日 期 : 
<br> 
<input type="date" name="user date"/> 
</form> 
</body> 
</html> 
在 Opera 45.0 中 浏览 ， 效 果 如 图 8-13 所 示 ， 用 户 单 击 输入 框 中 的 向 下 按钮 ， 即 可 在 弹出 
的 窗口 中 选择 需要 的 日 期 。 
OF2 Belh x + eee ne ed 
88 [© file///C:/Users/adminstror/Documents/ Q + 
请 选择 购买 商品 的 日 期 : 
S/A/A 六 "À 
20174075 ~ fej 














图 8-13 date 属性 的 效果 


8.3.4 案例 14—number 属性 的 使 用 


number 属性 提供 了 一 个 输入 数字 的 输入 类 型 。 用 户 可 以 直接 输入 数值 ， 或 者 通过 单 击 微 
调 框 中 的 向 上 或 者 向 下 按钮 来 选择 数值 。 代 码 格式 如 下 : 


<input type="number" name="shuzi" /> 


【 例 8.14] number 属性 的 使 用 (案例 文件 ，ch08\8.14.html)。 


<!DOCTYPE html> 
<html> 
<body> 
<form> 
<br/> 
此 网 站 我 曾经 来 
<input type="number"”name="shuzi"/> 次 了 哦 ! 
</form> 


</body> 
</html> 


在 Firefox 53.0 中 浏览 ， 效 果 如 图 8-14 所 示 ， 用 户 可 以 直接 输入 数值 ， 也 可 以 单 击 微调 
框 中 的 向 上 或 者 向 下 按钮 选择 合适 的 数值 。 
ZD S80 HEU GO #20 IAD WIH x 





file///C:/Users/adminstror/D: X VF 


© © file:///C:/Users/adminstror, © » 


此 网 站 我 曾经 来 3 UTE! 
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8-14 number 属性 的 效果 


了 提示 强烈 建议 用 户 使 用 min 和 max 属性 规定 输入 的 最 小 值 和 最 大 值 。 


8.3.5 “案例 15 一 一 range 属性 的 使 用 


range 属性 显示 为 一 个 滑 条 控件 。 与 number 属性 一 样 ， 用 户 可 以 使 用 max、min 和 step 
属性 来 控制 控件 的 范围 。 其 代码 格式 如 下 : 


<input type="range" name="" min="" max="" /> 


其 中 min 和 max 分 别 控制 滑 条 控件 的 最 小 值 和 最 大 值 。 
【 例 8.15] range 属性 的 使 用 (案例 文件 : ch08\8.15.html)。 


<!DOCTYPE html> 
<html> 
<body> 
<form> 
<br/> 
英语 成 绩 公布 了 ! 我 的 成 绩 名 次 为 : 
<input type="range" name="ran" min="1" max="10"/> 
</form> 
</body> 
</html> 


在 正 11.0 中 浏览 ， 效 果 如 图 8-15 Prax, AP ay De sere, MEE E BUA. 


ie 在 默认 情况 下 ， 滑 块 位 于 中 间 位 置 。 如 果 用 户 指定 的 最 大 值 小 于 最 小 值 ， 则 
A ”允许 使 用 反 向 滑 条 ， 目 前 浏览 器 对 这 一 属性 还 不 能 很 好 地 支持 。 
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一 o x 
(E cAusers\adminstron 了 - é lgo S So 
ZAA SAO HEV SERN IAD EMH 





英语 成 绩 公布 | 5 | 我 的 成 绩 名 次 为 : 


Te ER 











8-15 range 属性 的 效果 


8.3.6 ”案例 16 一 一 required 属性 的 使 用 


required 属性 规定 必须 在 提交 之 前 填写 输入 域 (不 能 为 空 )。 
required 属性 适用 于 以 下 类 型 的 输入 属性 : text. search, url, email, password, date, 
pickers、number、checkbox、radio 等 。 
【 例 8.16] required 属性 的 使 用 (案例 文件 ，ch08\8.16.html)。 


<!DOCTYPE html> 
<html> 
<body> 
<for 


> 
下 面 是 输入 用 户 登录 信息 


<input type="text" name="user" required="required"> 
<br> 
用 户 密码 
<input type="password" name="password" required="required"> 
<br> 
<input type="submit" value=" 登 录 "> 
</form> 
</body> 
</html> 


在 TE 11.0 中 浏览 ， 效 果 如 图 8-16 所 示 。 用 户 如 果 只 是 输入 密码 ， 然 后 单 击 “登录 ” 按 
钮 ， 将 弹出 提示 信息 。 





- 0 x 
E CNUsersvedminstron D ~ © | @ cAUsers\adminstror... X i Ww 
2HP RRO SEM we) IAD AH 


下 面 是 输入 用 户 登 录 信 息 
用 户 名 称 
用 户 密 
E] 


这 是 必 填 字段 




















图 8-16 required 属性 的 效果 
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84 综合 案例 一 一 创建 用 户 反馈 表单 


本 案例 将 使 用 一 个 表单 内 的 各 种 元 素来 开发 一 个 简单 的 网 站 用 户 意见 反馈 页 面 。 

具体 操作 步骤 如 下 。 

SED 分 析 需 求 。 反 馈 表单 非常 简单 ， 通 常 包含 3 个 部 分 ， 需 要 在 页 面 上 方 给 出 标 
题 ， 标 题 下 方 是 nl 正文 部 分 ， 即 表单 元 素 ， 最 下 方 是 表单 元 素 提交 按钮 。 在 设计 这 
个 页 面 时 ， 需 要 把 “用 户 注册 ”标题 设置 成 hl 大 小 ， 正 文 使 用 p 来 限制 表单 元 素 。 

CESID 构建 HIML 页 面 ， 实 现 表单 内 容 : 


<!DOCTYPE html> 
<html> 
<head> 
<title> 用 户 反馈 页 面 </title> 
</head> 
<body> 
<hl align=center> 用 户 反馈 表单 </h1> 
<form method="post"> 
<p> 姓 &nbsp; gnbsp; énbsp; &nbsp; 名 : 
<input type="text" class="txt" size="12" 
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maxlength="20" name="username" /></p> 
<p> 性 gnbsp; &nbsp; &nbsp; gnbsp; 别 : 
<input type="radio" value="male" /> 男 
<input type="radio" value="female" />k</p> 
<p>4f.enbsp; &nbsp; &nbsp; &nbsp; Ñf: 
<input type="text" class=txt name="age" /></p> 
<p> 联 系 电话 : 
<input type="text" class=txt name="tel" /></p> 
<p> 电 子 邮 件 : 
<input type="text" class=txt name="email" /></p> 
<p> 联 系 地 址 : 
<input type="text" class=txt name="address" /></p> 
<p> 
请 输入 您 对 网 站 的 建议 <br> 
<textarea name="yourworks" cols ="50" rows = "5"></textarea> 
<br> 
<input type="submit" name="submit" value=" 提 交 "/> 
<input type="reset" name="reset" value=" 清 除 " /></p> 
</form> 
</body> 
</html> 


在 TE 11.0 中 浏览 ， 效 果 如 图 8-17 所 示 。 可 以 看 到 ， 创 建 了 一 个 用 户 反馈 表单 ， 包 含 标 


题 以 及 “姓名 ”“ 性 别 ”“ 年 龄 ”“ 联 系 电话 ”“ 电 子 邮件 ”“ 联 系 地 址 ”“ 请 输入 您 对 网 
站 的 建议 ”等 输入 框 和 “提交 ”按钮 等 。 
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| [El CWsersadminston D ~ è SAAS 
28m REO BEM ean IAN FaH 


用 户 反馈 表单 








姓 名: 








E Hh OR O 女 
Eo ts 
联系 电话 ; 











电子 邮件 : 
联系 地 址 : 
请 输入 您 对 网 站 的 建议 




















S| La 

















8417 用 户 反馈 页 面 


8.5 ” 跟 我 学 上 机 一 一 制作 用 户 注册 表单 


注册 表单 非常 简单 ， 通 常 包含 3 个 部 分 ， 需 要 在 页 面 上 方 给 出 标题 ， 标 题 下 方 是 正文 部 
分 ， 即 表单 元 素 ， 最 下 方 是 表单 元 素 提交 按钮 。 具 体操 作 步 又 如 下 。 
SED 打开 记事 本 文件 ， 在 其 中 输入 下 述 代 码 : 


<!DOCTYPE html> 

<html> 

<head> 

<title> 注 册 表单 </title> 

</head> 

<body> 

<hl align=center> 用 户 注册 </h1> 

<form method="post"> 
<p> 姓 gnbsp; enbsp; &nbsp; gnbsp; 名 : 
<input type="text" class=txt size="12" 

maxlength="20" name="username" /> 

</p> 
<p> 性 gnbsp; &nbsp; nbsp; &nbsp; Fill: 
<input type="radio" value="male" /> 男 
<input type="radio" value="female" /> 女 
</p> 
<p>4Fenbsp; &nbsp; &nbsp; &nbsp; É$: 
<input type="text" class=txt name="age" /> 
</p> 
<p> RAHA: 
<input type="text" class=txt name="tel" /> 
</p> 





p 


<p> 电 子 邮 件 : 

<input type="text" class=txt name="email" /> 

</p> 

<p> 联 系 地 址 : 

<input type="text" class=txt name="address" /> 

</p> 

<p> 

<input type="submit" name="submit" value=" 提 交 " class=but /> 
<input type="reset" name="reset" value=" 清 除 " class=but /> 
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</p> 
</form> 
</body> 
</html> 
SOID 保存 网 页 ， 在 正 11.0 中 预览 ， 效 果 如 图 8-18 所 示 。 
- o x 
E) EABaiduNetdiskDom O ~ © 大 注册 表单 xO 


文件 (月 SRE EEV) 收藏 夫 (A) IAT) 。 帮助 (H) 


用 户 注册 














性 3: OB Ok 











MW 


























提交 | | 清除 


























图 8-18 网 页 预览 效果 


8.6 高 手 解 惑 


疑问 1: 如 何在 表单 中 实现 文件 上 传 框 ? 


答 : 在 HIML 5 语言 中 ， 使 用 file 属性 实现 文件 上 传 框 。 语 法 格式 为 : <input type="file" 
name="..."size=" "maxlength=" ">。 其 中 type="file" 定 义 为 文件 上 传 框 ，name 属性 定义 文件 
上 传 框 的 名 称 ; size 属性 定义 文件 上 传 框 的 宽度 ， 单 位 是 单个 字符 宽度 ，maxlength 属性 定义 
最 多 输入 的 字符 数 。 文 件 上 传 框 的 显示 效果 如 图 8-19 所 示 。 
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D CAUsers\adminstron O ~ © | € p: 
RH #80 SEV KERA TAD #” 

















图 8-19 文件 上 传 框 
疑问 2: 制作 的 单 选 按 钮 为 什么 可 以 同时 选中 多 个 ? 


答 : 此 时 用 户 需 要 检查 单 选 按钮 的 名 称 ， 保 证 同一 组 中 的 单 选 按钮 名 称 必须 相同 ， 这 样 
才能 保证 单 选 按钮 只 能 选中 其 中 一 个 。 
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第 9 章 
使 用 HTML 5 
创建 表格 


HTML 中 的 表格 不 但 可 以 清晰 地 显示 数据 ， 而 且 可 以 用 于 页 面 布局 。HTML 中 
的 表格 类 似 于 Word 软件 中 的 表格 ， 尤 其 是 使 用 网 页 制作 工具 ， 操 作 很 相似 。 

HTML 表格 制作 是 使 用 相关 标记 (如 表格 对 象 table 标记 、 行 对 象 tr 标记 、 单 元 
格 对 象 td 标记 ) 来 完成 的 。 


重点 案例 效果 


计算 机 报价 单 
w EETA 


“学 生成 绩 表 


语文 成 结 
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9.1 案例 1 一 一 表格 的 基本 结构 


使 用 表格 显示 数据 ， 可 以 更 直观 和 清晰 。 在 HTML 文档 中 ， 表 格 主 要 用 于 显示 数据 ， 虽 
然 可 以 使 用 表格 布局 ， 但 是 不 建议 使 用 ， 它 有 很 多 次 端 。 表 格 一 般 由 行 、 列 和 单元 格 组 成 ， 
如 图 9-1 所 示 。 


























列 
| 
单元 格 
行 
特点 ， 通 常情 况 下 ， 
同行 的 高 度 一 致 、 同 
宽度 一 致 
9-1 表格 的 组 成 


在 HTML 5 中 ， 用 于 创建 表格 的 标记 如 下 。 

(1) <table>。 用 于 标识 一 个 表格 对 象 的 开始 ，</table> 标 记 标识 一 个 表格 对 象 的 结束 。 一 
个 表格 中 ， 只 允许 出 现 一 对 <table> 标 记 。HTML 5 中 不 再 支持 它 的 任何 属性 。 

(2) <tr>。 用 于 标识 表格 一 行 的 开始 ，</tr> 标 记 用 于 标识 表格 一 行 的 结束 。 表 格 内 有 多 少 
对 <tr></tr> 标 记 ， 就 表示 表格 中 有 多 少 行 。HTML 5 中 不 再 支持 它 的 任何 属性 。 

(3) <td>。 用 于 标识 表格 某 行 中 的 一 个 单元 格 的 开始 ，</td> 标 记 用 于 标识 表格 某 行 中 一 
个 单元 格 的 结束 。<td></td> 标 记 应 书写 在 <tr></tr> 标 记 内 ， 一 对 <tr></tr> 标 记 内 有 多 少 对 
<td></td> 标 记 ， 就 表示 该 行 有 多 少 个 单元 格 。HTML 5 中 ，<td> 仅 有 colspan 和 rowspan 两 个 
属性 。 

最 基本 的 表格 ， 必 须 包 含 一 对 <table></table> 标 记 、 一 对 或 几 对 <tr></tr> 标 记 以 及 一 对 或 
几 对 <td></td> 标 记 。 一 对 <table></table> 标 记 定 义 一 个 表格 ， 一 对 <tr></tr> 标 记 定义 一 行 ， 一 
对 <td></td> 标 记 定义 一 个 单元 格 。 

【 例 9.1】 定 义 一 个 4 行 3 列 的 表格 (案例 文件 ，ch09\9.1.htmD)。 

<!DOCTYPE html> 

<html> 

<head> 

<title> 表 格 基 本 结构 </title> 

</head> 

<body> 

<table border="1"> 

<tr> 


<td>Al</td> 
<td>B1</td> 


<td>C1</td> 
</tr> 
<tr> 
<td>A2</td> 
<td>B2</td> 
<td>C2</td> 
</tr> 
<tr> 
<td>A3</td> 
<td>B3</td> 
<td>C3</td> 
</tr> 
<tr> 
<td>A4</td> 
<td>B4</td> 
<td>C4</td> 
</tr> 
</table> 
</body> 
</html> 


H IE 11.0 中 预览 ， 效 果 如 图 9-2 所 示 。 





= 0 x 
E) CAUsers\adminstron O ~ Ò | © 表格 基本 结构 
文件 (F) SRE BBV) ”收藏 夫 (A) IAT) BIH) 

















图 9-2 定义 一 个 4 行 3 列 的 表格 
PI 从 预览 图 中 ， 读 者 会 发 现 ， 表 格 没 有 边框 ， 行 高 及 列 宽 也 无 法 控制 。 进 行 上 


Qo 述 知识 讲述 时 ， 提 到 HTML 5 中 除了 td 标记 提供 两 个 单元 格 合并 属性 之 外 ， 
<table> 和 <tr> 标 记 也 没有 任何 属性 。 


9.2 创建 表格 
表格 可 以 分 为 普通 表格 以 及 带 有 标题 的 表格 ， 在 HTML 5 中 ， 可 以 创建 这 两 种 表格 。 


9.2.1 案例 2 一 一 创建 普通 表格 


例如 创建 1 列 、1 行 3 列 和 2 行 3 列 的 三 个 表格 。 
【 例 9.2】 创 建 普通 表格 (案例 文件 ，ch09\9.2.html)。 
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<!DOCTYPE html> 
<html> 
<body> 
<h4> 一 列 : </h4> 
<table border="1"> 
<tr> 
<td>100</td> 
</tr> 
</table> 
<h4> 一 行 三 列 : </h4> 
<table border="1"> 
Sera 
<td>100</td> 
<td>200</td> 
<td>300</td> 
</tr> 
</table> 
<h4> 两 行 三 列 : </h4> 
<table border="1"> 
<tr> 
<td>100</td> 
<td>200</td> 
<td>300</td> 
</tr> 
<tr> 
<td>400</td> 
<td>500</td> 
<td>600</td> 
</tr> 
</table> 
</body> 
</html> 


在 IE 11.0 中 预览 ， 效 果 如 图 9-3 所 示 。 


| E) GUsersadminstron O = C || E cAUsers\adminstror.. x A: 
ZAHA SAO SEV SERA LAT) NMH) 





一 列 : 
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图 9-3 创建 1 列 、1 行 3 列 和 2 行 3 列 的 三 个 表格 


9.2.2 ”案例 3 一 一 创建 一 个 带 有 标题 的 表格 


有 时 ， 为 了 方便 表述 表格 ， 还 需要 在 表格 的 上 面 加 上 标题 。 
【 例 9.3】 创 建 一 个 带 有 标题 的 表格 (案例 文件 : ch09\9.3.html). 


<!DOCTYPE html> 
<html> 
<body> 
<h4> 带 有 标题 的 表格 </h4> 
<table border="3"> 
<caption> 数 据 统 计 表 </caption> 
<tr> 
<td>100</td> 
<td>200</td> 
<td>300</td> 
</tr> 
<tr> 
<td>400</td> 





<td>500</td> 

<td>600</td> 
-Er 
</table> 
</body> 
</html> 


Æ IE 11.0 中 预览 ， 效 果 如 图 9-4 所 示 。 





= a x 


RHR SIWLH ae thew A 


E) GWUsers\adminstro O ~ © | E cAUsers\adminstror... X 
ZAHA RRE BEV) CERA IAM 帮助 (H) 





带 有 标题 的 表格 


数据 统计 表 
[100|[200]'300] 
[400|(500|(600] 
































9-4 创建 一 个 带 有 标题 的 表格 


9.3 编辑 表格 


在 创建 好 表格 之 后 ， 还 可 以 编辑 表格 ， 包 括 设置 表格 的 边框 类 型 、 设 置 表格 的 表 头 、 合 
并 单元 格 等 。 


9.3.1 案例 4 一 一 定义 表格 的 边框 类 型 


使 用 表格 的 border 属性 可 以 定义 表格 的 边框 类 型 ， 如 常见 的 加 粗 边 框 的 表格 。 
【 例 9.4】 创 建 不 同 边框 类 型 的 表格 (案例 文件 : ch09\9.4.htmD) 。 


<!DOCTYPE html> 
<html> 
<body> 
<h4> 普 通 边框 </h4> 
<table border="1"> 
LETS 
<td>First</td> 
<td>Row</td> 
</tr> 
<tr> 
<td>Second</td> 
<td>Row</td> 
</tr> 
</table> 
<h4> 加 粗 边 框 </h4> 
<table border="8"> 
<tr> 
<td>First</td> 
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<td>Row</td> 

fer, 

<tr> 
<td>Second</td> 
<td>Row</td> 

</tr> 

</table> 

</body> 

</html> 


Æ IE 11.0 中 预览 ， 效 果 如 图 9-5 所 示 。 
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图 9-5 创建 不 同 边框 类 型 的 表格 


9.3.2 ”案例 5 一 一 定义 表格 的 表 头 


表格 中 也 存在 有 表 头 ， 常 见 的 表 头 分 为 水 平 的 和 垂直 的 两 种 。 例 如 ， 
和 垂直 表 头 的 表格 。 


【 例 9.S】 定 义 表格 的 表 头 (案例 文件 : ch09\9.5.html)。 


<!DOCTYPE html> 
<html> 
<body> 
<h4> 水 平 的 表 头 </h4> 
<table border="1"> 
<tr> 
<th>RE%</th> 
<th> 性 别 </th> 
<th> 电 话 </th> 
SEES 
<tr> 
<td> 张 三 </td> 
<td> 男 </td> 
<td>123456</td> 
</tr> 
</table> 
<h4> 垂 直 的 表 头 : </h4> 
<table border="1"> 
<tr> 
<th> 姓 名 </th> 
<td> 小 丽 </tad> 


分 别 创建 带 有 水 平 
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<th> 电 话 </th> pe FER) this = 
<td>123456</td> 张 三 | 男 |123456| a 
人 HMRI: 建 
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Eo pen 格 
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在 正 11.0 中 预览 网 页 ， 效果 如 图 9-6 所 示 。 


9.3.3 ”案例 6 一 一 设置 表格 背景 


当 创 建 好 表格 后 ， 为 了 美观 ， 还 可 以 设置 表格 的 背景 ， 如 为 表格 定义 背景 颜色 、 为 表格 
定义 背景 图 片 等 。 


1. 定义 表格 背景 颜色 


为 表格 添加 背景 颜色 是 美化 表格 的 一 种 方式 。 
【 例 9.6】 为 表格 添加 背景 颜色 (案例 文件 ，ch09\9.6.html)。 


<!DOCTYPE html> 
<html> 
<body> O es 
<h4> 背 景 颜 色 : </h4> = 0 X 
<table border="1" @ E) CAUsers\adminstron O ~ G | | @ cau: 
bgcolor="green"> SHH RIO 7 an” 
<tr> za BER Iam 
<td>100</td> 
<td>200</td> 背景 颜色 : 
</tr> 


<tr> 
<td>300</td> 
<td>400</td> 


</tr> 
</table> 
</body> 


</html> 图 9-7 为 表格 添加 背景 颜色 
在 正 11.0 中 预览 网 页 ， 效 果 如 图 9-7 所 示 。 
2. 定义 表格 背景 图 片 


除了 可 以 为 表格 添加 背景 颜色 外 ， 还 可 以 将 图 片 设置 为 表格 的 背景 。 例 如 ， 为 表格 添加 
背景 图 片 。 
【 例 9.7】 定 义 表格 背景 图 片 (案例 文件 : ch09\9.7.html)。 





图 9-6 分 别 创建 带 有 水 平和 垂直 表 头 的 表格 
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<!DOCTYPE html> 
<html> 
<body> = o x 
<h4> 背 景 图片 : </h4> @ E) CAUsers\adminstron © ~ © | | @ caud 
<table border="1" background="images/1.gif"> 3 S 
pas ZA SSE EEV) BERA IAM 者! 
<td>100</td> 
<td>200</td> 背景 图 片 : 
</tr> 


<tr> 
<td>300</td> {100]/200 
<td>400</td> [38ool4o0| 
</tr> 
</table> 
</body> 
emia 图 9-8 ”为 表格 添加 背景 图 上 


在 正 11.0 中 预览 网 页 ， 效果 如 图 9-8 所 示 。 
93.4 ”案例 7 一 一 设置 单元 格 的 背 


除了 可 以 为 表格 设置 背景 外 ， 还 可 以 为 单元 格 设置 背景 ， 包 括 添 加 背景 颜色 和 背景 图 片 
两 种 。 
【 例 9.8】 为 单元 格 添加 背景 (案例 文件 : ch09\9.8.html). 


<!DOCTYPE html> 
<html> 
<body> 
<h4> 单 元 格 背 景 </h4> 
<table border="1"> 
<tr> 
<td bgcolor="red">100000</td> 

















= o x 
E) CAUsers\adminstron’ O ~ © | GB CAUsers\ad 
RE) EEV ERA) ILAT) WRH) 








<td>200000</td> 
</tr> 单元 格 背景 
Ser 

<td background="images/1.gif">200000</td> | 200000 

<td>300000</td> 1000001300000) 
</tr> 
</table> 




















</body> 
</html> 图 9-9 ”为 单元 格 添加 背景 
在 正 11.0 中 预览 网 页 ， 效 果 如 图 9-9 所 示 。 


9.3.5 “案例 8 一 一 合并 单元 格 
在 实际 应 用 中 ， 并 非 所 有 表格 都 是 规范 的 几 行 几 列 ， 而 是 需要 将 某 些 单元 格 进行 合并 ， 


以 符合 某 种 内 容 上 的 需要 。 在 HTML 中 ， 合 并 的 方向 有 两 种 : 一 是 上 下 合并 ; 二 是 左右 合 
并 。 这 两 种 合并 方式 只 需要 使 用 td 标记 的 两 个 属性 即 可 。 
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1. 用 colspan 属性 合并 左右 单元 格 


左右 单元 格 的 合并 需要 使 用 td 标记 的 colspan 属性 来 完成 ， 其 语法 格式 如 下 : 


<td colspan=" 数 值 "> 单元 格 内 容 </td> 


其 中 ，colspan 属性 的 取 值 为 数值 型 整数 数据 ， 代 表 几 个 单元 格 进行 左右 合并 。 

例如 ， 在 例 9.1 表格 的 基础 上 ， 将 Al 单元 格 和 BL 单元 格 合并 成 一 个 单元 格 。 为 第 一 行 
的 第 一 个 <td> 标 记 增加 colspan="2" 属 性 ， 并 且 将 B1 单元 格 的 <td> 标 记 删 除 。 

【 例 9.9】 用 colspan 属性 合并 左右 单元 格 (案例 文件 : ch09\9.9.htmD 。 


<!DOCTYPE html> 
<html> 
<head> 
<title> 单 元 格 左右 合并 </title> 
</head> 
<body> 
<table border="1"> 
<tr> 
<td colspan="2">Al B1</td> 
<td>Cl</td> 
</tr> 
<tr> 
<td>A2</td> 
<td>B2</td> 
<td>C2</td> 
</tr> 
<tr> 
<td>A3</td> 
<td>B3</td> 
<td>C3</td> 
</tr> 
<tr> 
<td>A4</td> 
<td>B4</td> 
<td>c4</td> 
</tr> 
</table> 
</body> 
</html> 





- o x 
E) CAUsers\adminstron O ”C | @ 单元 格 左 右 合并 
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在 正 11.0 中 预览 网 页 ， 效 果 如 图 9-10 所 示 。 
从 预览 图 中 可 以 看 到 ，Al 和 Bl 单元 格 合并 成 
一 个 单元 格 ，C1 还 在 原来 的 位 置 上 。 





图 9-10 单元 格 左右 合并 


o? 合并 单元 格 以 后 ， 相 应 的 单元 格 标记 就 应 该 减少 。 例 如 ，Al 和 Bl 合并 后 ， 
[E Bl 单元 格 的 <td><jtd> 标 记 就 应 该 丢掉 ， 和 否则 单元 格 就 会 多 出 一 个 ， 并 且 后 面 的 音 


元 格 依次 向 右 位 移 。 


RHR GWHee Hew a 
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2. 用 rowspan 属性 合并 上 下 单元 格 
上 下 单元 格 的 合并 需要 为 <td> 标 记 增 加 rowspan 属性 ， 其 语法 格式 如 下 : 
<td rowspan=" 数 值 "> 单元 格 内 容 </td> 


其 中 ，rowspan 属性 的 取 值 为 数值 型 整数 数据 ， 代 表 几 个 单元 格 进行 上 下 合并 。 
例如 ， 在 例 9.1 表格 的 基础 上 ， 将 Al 单元 格 和 A2 单元 格 合并 成 一 个 单元 格 。 


的 第 一 个 <td> 标 记 增 加 rowspan="2" 属 性 ， 并 且 将 A2 单元 格 的 <td> 标 记 删 除 。 


【 例 9.10】 用 rowspan 属性 合并 上 下 单元 格 (案例 文件 : ch09\9.10.html). 


<!DOCTYPE html> 
<html> 
<head> 
<title> 单 元 格 上 下 合并 </title> 
</head> 
<body> 
<table border="1"> 
<tr> 
<td rowspan="2">A1</td> 
<td>B1l</td> 
<td>Cl</td> 
</tr> 
<tr> 
<td>B2</td> 
<td>C2</td> 
</tr> 
<tr> 
<td>A3</td> 
<td>B3</td> 
<td>C3</td> 
</tr> 


为 第 一 行 





<tr> = 


口 X 


<td>A4</td> E) EABaiduNetdiskDom O ~ © | Bt Fa# xO 


<td>B4</td> XHA RRE BEV) SRRA IAT) WAH 














<td>C4</td> Bye 
</tr> Al 
</table> 3}83][C3| 
</body> djB4jca 
</html> 

































































在 正 11.0 中 预览 网 页 ， 效 果 如 图 9-11 所 示 。 图 9-11 单元 格 上 下 合并 
从 预览 图 中 可 以 看 到 ，Al 单元 格 和 A2 单 


元 格 合并 成 了 一 个 单元 格 。 


通过 上 面 对 左 右 单元 格 合并 和 上 下 单元 格 合并 的 操作 ， 读 者 会 发 现 ， 合 并 单元 格 就 是 


【 例 9.11】 单 元 格 向 右 和 向 下 合并 (案例 文件 : ch09\9.11.htmD。 


<!DOCTYPE html> 


“丢掉 ” 某 些 单元 格 。 对 于 左右 合并 ， 就 是 以 左 侧 为 准 ， 将 右 侧 要 合并 的 单元 格 “丢掉 ”， 
对 于 上 下 合并 ， 就 是 以 上 方 为 准 ， 将 下 方 要 合并 的 单元 格 “ 丢 掉 ”。 如 果 一 个 单元 格 既 要 向 
右 合 并 ， 又 要 向 下 合并 ， 该 如 何 实现 呢 ? 


<html> 
<head> 
<title> 单 元 格 上 下 左右 合并 </title> 
</head> 
<body> 
<table border="1"> 
<tr> 
<td colspan="2" rowspan="2">A1B1<br>A2B2</td> 
<td>C1</td> 
</tr> 
<tr> 
<td>C2</td> 
</tr> 
<tr> 
<td>A3</td> = oe 
<td>B3</td> @ E) E\BaiduNetdiskDowm O ~ © GME FES... 


EE ZH REO) EEV) SERA IAM 帮助 (H) 
</tr> 


<tr> AlB1 jc 
<td>A4</td> A2B2 |[ca] 
[c3] 

图 


























<td>B4</td> 
<td>Cc4</td> 
</tr> 
</table> 
</body> 图 9-12 在 两 个 方向 合并 单元 格 
</html> 
在 正 11.0 中 预览 网 页 ， 效果 如 图 9-12 所 示 。 
从 上 述 代码 可 以 看 到 ，A1 单元 格 向 右 合并 BI 单元 格 ， 向 下 合并 A2 单元 格 ， 并 且 A2 M 


元 格 向 右 合 并 B2 单元 格 。 

3. 使 用 Dreamweaver CC 合并 单元 格 

使 用 HTML 创建 表格 非常 麻烦 。 在 Dreamweaver CC 中 ， 提 供 了 表格 的 快捷 操作 ， 类 似 
于 在 Word 中 编辑 表格 的 操作 。 在 Dreamweaver CC 中 创建 表格 ， 只 需要 选择 “插入 ”一 “ 表 
格 ” 菜 单 命令 ， 在 弹出 的 对 话 框 中 指定 表格 的 行 数 、 列 数 、 宽 度 和 边框 ， 即 可 在 光标 处 创建 
一 个 空白 表格 。 选 择 表 格 后 ， 属 性 面板 提供 了 表格 的 常用 操作 ， 如 图 9-13 所 示 。 










































































aaj aw BO, es v mo mopu v ROE x] 
— | m aaa 
‘Swe FL je 
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图 9-13 表格 的 属性 面板 
Se: 表格 属性 面板 中 的 操作 ， 请 结合 前 面 讲述 的 HTML 语言 。 对 于 按钮 命令 ， 可 
li 将 饼 标 是 停 于 按钮 之 上 ， 数 秒 之 后 会 出 现 命令 提示 . 
关于 表格 的 操作 不 再 袭 述 ， 读 者 可 自行 操作 ， 这 里 重点 讲解 如 何 使 用 Dreamweaver CCA 


并 单元 格 。 在 Dreamweaver CC 可 视 化 操作 中 ， 提 供 了 合并 与 拆 分 单元 格 两 种 操作 。 拆 分 单元 
格 的 操作 ， 其 实 还 是 进行 合并 的 操作 。 进 行 单元 格 合 并 和 拆 分 时 ， 应 将 光标 置 于 单元 格 内 ， 
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如 果 选 择 了 一 个 单元 格 ， 拆 分 命令 有 效 ， 如 图 9-14 所 示 。 如 果 选 择 了 两 个 或 两 个 以 上 单元 
格 ， 则 合并 命令 有 效 。 



























































RAO 无 v 类 无 | BT = 15 8 2 RED 
DO 无 ~ BED yon ERO 
单元 格 FOR v O | 不 执行 口 TAMEO] Caran 
垂直 加 )| 默认 Y wo ravo 














合并 单元 格 。 拆 分 单元 格 


9-14 ” 拆 分 单元 格 有 效 


9.3.6 ”案例 9 一 一 排列 单元 格 中 的 内 容 


使 用 align 属性 可 以 排列 单元 格 中 的 内 容 ， 以 便 创 建 一 个 美观 的 表格 。 
【 例 9.12】 排 列 单元 格 中 的 内 容 (案例 文件 : ch09\9.12.html). 


<!DOCTYPE html> 
<html> 
<body> 
<table width="400" border="1"> 
<tr> 
<th align="left"> 项 目 </th> 
<th align="right"> 一 月 </th> 
<th align="right"> 二 月 </th> 
</tr> 
<tr> 
<td align="left"> iR</td> 
<td align="right">$241.10</td> 
<td align="right">$50.20</td> 
</tr> 
<tr> 
<td align="left"> 化 妆 品 </td> 
<td align="right">$30.00</td> 
<td align="right">$44.45</td> 
</tr> 
SELA 
<td align="left"> </td> 
<td align="right">$730.40</td> 
<td align="right">$650.00</td> 


































































































</tr> | 一 
<tr> | 司 CVsers\edminetron P ~ © | BUsers\edminstror.. X | 
<th align="left"> 总 计 </th> | xem sso sam maw Iam sam 
<th align="right">$1001.50</th> mH —H 二 月 
<th align="right">$744.65</th> 衣服 $241. 10 $50. 20] 
</tr> 化 妆 品 $30. 00) $44. 45] 
</table> 食物 $730. 40) $650. 00] 
</body> EN $1001.50 $744. 65] 
</html> | 
WE IE 11.0 中 预览 网 页 ， 效果 如 图 9-15 所 示 。 9-15 ”排列 单元 格 的 内 容 


9.3.7 案例 10 一 一 设置 单元 格 的 行 高 与 列 宽 


使 用 cellpadding 来 创建 单元 格 内 容 与 其 边框 之 间 的 空白 ， 从 而 调整 表格 的 行 高 与 列 宽 。 
【 例 9.13】 设 置 单 元 格 的 行 高 与 列 宽 (案例 文件 : ch09\9.13.html)。 


<!DOCTYPE html> 

<html> 

<body> 

<h4> 调 整 前 </h4> 

<table border="1"> 

<tr> 
<td>1000</td> 
<td>2000</td> 

</tr> 

ier 
<td>2000</td> 


<td>3000</td> - ag x 
</tr> (©) [E qusers\adminstror\ O ~ © || @cAusers\adminstror..x | | {i T 
HA) RAO FEV SERA IAM NIH 
</table> à 


<h4> 调 整 后 </h4> 调整 前 
<table border="1" cellpadding="10"> p 


<tr> 1000)/2000] 
<td>1000</td> [2000]/3000] 


<td>2000</td> 
<er> 调整 后 
<tr> 

<td>2000</td> 

<td>3000</td> 1000 || 2000 
</tr> 
</table> 
</body> 
</html> 


ETE 11.0 中 预览 网 页 ， 效 果 如 图 9-16 所 示 。 
9.4 案例 11 一 一 完整 的 表格 标记 


上 面 讲 述 了 表格 中 最 常用 也 是 最 基本 的 3 个 标记 <table>、<tr> 和 <td>， 使 用 它们 可 以 构建 
出 最 简单 的 表格 。 为 了 让 表格 结构 更 清楚 ， 以 及 配合 后 面 学 习 的 CSS 样式 ， 更 方便 地 制作 各 
种 样式 的 表格 ， 表 格 中 还 会 出 现 表 头 、 主 体 、 脚 注 等 。 

按照 表格 结构 ， 可 以 把 表格 的 行 分 组 ， 称 为 “ 行 组 ”。 不 同 的 行 组 具有 不 同 的 意义 。 行 
组 分 为 3 类 一 一 “ 表 头 ”“ 主 体 ” 和 “脚注 ”。 三 者 相应 的 HTML 标记 依次 为 <thead>、<tbody> 
和 <tfoot>。 

此 外 ， 在 表格 中 还 有 两 个 标记 : 标记 <caption> 表 示 表 格 的 标题 ， 在 一 行 中 ， 除 了 <td> 标 
记 表 示 一 个 单元 格 以 外 ， 还 可 以 使 用 <th> 表 示 该 单元 格 是 这 一 行 的 “行头 ”。 

【 例 9.14】 完 整 的 表格 标记 (案例 文件 :ch09\9.14.htmD)。 


Sie mhar mesa 



























































2000 || 3000 









































9-16 使 用 cellpadding 来 调整 表格 的 行 高 与 列 宽 
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<!DOCTYPE html> 
<html> 
<head> 
<title> 完 整 表格 标记 </title> 
<style> 
tfoot{ 
background-color: #FF3; 
$ 
</style> 
</head> 
<body> 
<table border="1"> 
<caption> 学 生成 绩 单 </caption> 
<thead> 
<tr> 
<th> 姓 名 </th><th> 性 别 </th><th> 成 绩 </th> 
</tr> 
</thead> 
<tfoot> 
<tr> 
<td> 平 均 分 </td><td colspan="2">540</td> 
<tr>. 
</tfoot> 
<tbody> 
<tr> 
<td>#kK=</td><td>B</td><td>560</td> 
</tr> 
<tr> 
<td> 李 四 </td><td> 男 </td><td>520</td> 








</tr> - o x 
</tbody> | E) cAUcerc\adminetron D ~ C || S rnamm 
</table> TAD RAO FEV NEZA IAT MNH 





</body> 学 生成 绩 单 
</html> 姓名 | 性 别 戈 纲 
张 三 上 男 |560 

从 上 述 代码 可 以 发 现 ， 使 用 caption 表格 定义 了 表格 E 加 四 
标题 ，<thead>、<tbody> 和 <tfoot> 标 记 对 表格 进行 了 分 = 


组 。 在 <thead> 部 分 使 用 <th> 标 记 代 蔡 <td> 标 记 定 义 单元 




































































格 ，<th> 标 记 定义 的 单元 格 内 容 默认 加 粗 显示 。 网 页 的 预 图 9-17 完整 的 表格 结构 
览 效 果 如 图 9-17 所 示 。 


mi 


ji ik <caption> 标 记 必 须 紧 随 <table> 标 记 之 后 。 
意 


9.5 ”综合 案例 一 一 制作 计算 机 报价 表 


利用 所 学 的 表格 知识 ， 来 制作 如 图 9-18 所 示 的 计算 机 报价 表 。 
具体 操作 步骤 如 下 。 
SS 新 建 HIML 5 文档， 代码 如 下 : 






<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8" /> 
<title> 完 整 表 格 标记 </title> 
</head> 

<body> 

</body> 

</html> 


RAEL S TINLHÆA Aew m 


”计算 机 报价 单 


SS 美 型 价格 图 片 














"EEA (Acer) AS4552-P362G32MNCC 笔记 本 |¥2799 


BR Del) 14VR-188 RAZE [Y 399 


FRAE Cenovo) GA70AH2310W42G500P 7CW3HDB)-CN ABA (Y 4149) J 
REE (DELL) 156058656 GX |¥3599 | 


ERGER Hiteker) HS-5508-TF 各 式 |¥3399 


FEE Lenovo) G470 笔记 本 站 4299 =| 








图 9-18 计算 机 报价 表 
ESTP 在 HTML 文档 的 body 部 分 增加 表格 及 内 容 ， 代 码 如 下 : 


<table> 
<caption> 计 算 机 报价 单 </caption> 
<tr> 
<th> 型 号 </th> 
<th> 类 型 </th> 
<th> 价 格 </th> 
<th> 图 片 </th> 
</tr> 
RETS 
<td>## (Acer) AS4552-P362G32MNCC</td> 
<td> 笔 记 本 </td> 
<td> ¥2799</td> 
<td><img src="images/Acer.jpg" width="120" height="120"></td> 
</tr> 
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<tr> 

<td>WU/K (Dell) 14VR-188</td><td> 笔 记 本 </td> 

<td> ¥ 3499</td> 

<td><img src="images/Dell.jpg" width="120" height="120"></td> 
</tr> 

<tr> 

<td> 联 想 (Lenovo) G470AH2310W42G500P7CW3 (DB)-CN </td> 
<td> 笔 记 本 </td> 

<td> ¥ 4149</td> 

<td><img src="images/Lenovo.jpg" width="120" height="120"></td> 
</tr> 
<tr> 

<td> 戴 尔 家 用 (DELL) I560SR-656</td> 

<td> 台 式 </td> 

<td> ¥ 3599</td> 

<td><img src="images/Dell1T.jpg" width="120" height="120"></td> 
</tr> 
<tr> 

<td> 宏 图 奇 上 及 (Hiteker) HS-5508-TF</td> 

<td> 台 式 </td> 

<td> ¥ 3399</td> 

<td><img src="images/Hiteker.jpg" width="120" height="120"></td> 
</tr> 
<tr> 

<td>]R# (Lenovo) G470</td> 

<td> 笔 记 本 </td> 

<td> ¥ 4299</td> 

<td><img src="images/LenovoG. jpg" width="120" height="120"></td> 
</tr> 

</table> 


利用 caption 标记 制作 表格 的 标题 ， 用 <th> 代 蔡 <td> 作 为 标题 行 单元 格 。 可 以 将 图 片 放 在 
单元 格 内 ， 即 在 <td> 标 记 内 使 用 <img> 标 记 。 
ESTE 在 HTML 文档 的 head 部 分 增加 CSS 样式 ， 为 表格 增加 边框 及 相应 的 修饰 ， 代 
码 如 下 : 


<style> 
table{ 
/* 表 格 增加 线 宽 为 3 的 橙色 实 线 边 框 */ 


border:3px solid #F60; 





} 

caption{ 
/* 表 格 标题 字号 36*/ 
font-size:36px; 

th,td{ 
/* 表 格 单元 格 (th、tq) 增加 边线 */ 
border:lpx solid #F90; 

} 

</style> 


CESID 保存 网 页 后 ， 即 可 查看 最 终 效 果 。 


9.6” 跟 我 学 上 机 一 一 制作 学 生成 绩 表 


本 练习 将 结合 前 面 学 习 的 知识 ， 创 建 一 个 学 生成 绩 表 。 具 体操 作 步骤 如 下 。 
COND 分 析 需 求 。 首 先 需要 建立 一 个 表格 ， 所 有 行 的 颜色 不 单独 设置 ， 统 一 采用 表格 

本 身 的 背景 色 。 然 后 根据 CSS 设置 可 以 实现 该 效果 ， 如 图 9-19 所 示 。 
CED 创建 HTML 网 页 ， 实 现 table 表格 : 


<!DOCTYPE html> 
<html> 
<head> 
<title> 学 生成 绩 表 </title> 
</head> 
<body> 
<table border="0" cellpadding="0" cellspacing="1"> 
<caption> 学 生成 绩 表 </caption> 
<tr> 
<th> 姓 名 </th> 
<th> 语 文成 绩 </th> 
</tr> 
<tr class="hui"> 
<td>= </td> 
<td>85</td> 
</tr> 
<tr> 
<td> ffi</td> 
<td>78</td> 
</tr> 
<tr class="hui™> 
<td>iK#</td> 
<td>89</td> 
</tr> 
<tr> 
<tqd> 苏 石 </td> 
<td>86</td> 
</tr> 
<tr class="hui"> 
<td> 马 丽 </td> 
<td>90</td> 
</tr> 
<tr> 
<tq> 张 丽 </td> 
<td>90</td> 
</tr> 
<tr class="hui"> 
<td> 冯 尚 </td> 
<td>85</td> 
Er> 
<tr> 
<td > 李 旺 </td> 
<td>75</td> 
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</tr> 
</table> 
</body> 
</html> 


在 IE 11.0 中 浏览 ， 效 果 如 图 9-20 所 示 ， 可 以 看 到 显示 了 一 个 表格 ， 表 格 不 带 有 边框 ， 
字体 等 都 是 默认 显示 。 









































[er a S vena fee _ - o x 
zan ean sev sama Iam amos I< E ciuserstadninsvon D ~ © || S yeaa x Hwee 
学 生成 绩 eh SAO FEV) SIRA IAM) EUH 
学 生成 绩 表 学 生成 绩 表 
s pene 姓名 语文 成 绩 
Ee z 王 锋 85 
aa z 21878 
张 字 89 
EE 
+B J 马 丽 90 
EJ 5 张 丽 90 
FE 75 冯 尚 85 
李 旺 75 
图 9-19 变色 表格 图 9-20 创建 基本 表格 


添加 CSS 代码 ， 修 饰 table 表格 和 单元 格 : 


<style type="text/css"> 

a 

table { 
width: 600px; 
margin-top: 0px; 
margin-right: auto; 
margin-bottom: 0px; 
margin-left: auto; 
text-align: center; 
background-color: #000000; 
font-size: 9pt; 


td { 
padding: 5px; 
background-color: #FFFFFF; 
} 
--> 
</style> 


在 IE 11.0 中 浏览 ， 效 果 如 图 9-21 所 示 ， 可 以 看 到 显示 了 一 个 表格 ， 表 格 带 有 边框 ， 行 
内 字体 居中 显示 ， 但 列 标题 背景 色 为 黑色 ， 其 中 字体 不 能 够 显示 。 
SESE 添加 CSS 代码， 修饰 标 题 : 


caption{ 
font-size: 36px; 
font-family: "Sk", "Rik"; 
padding-bottom: 15px; 

F 

EE 
font-size: 13px; 
background-color: #cad9ea; 


color: #000000; 
i 
th{ 
padding: 5px; 
} 
shui td t 
background-color: #f5fafe; 
$ 


在 上 述 代码 中 ， 使 用 了 类 选择 器 hui 来 定义 每 个 td 行 所 显示 的 背景 色 ， 此 时 需要 在 表格 
中 每 个 奇数 行 都 引入 该 类 选择 器 。 例 如 <tr class="hui">， 从 而 设置 奇数 行 的 背景 色 。 

在 TE 11.0 中 浏览 ， 效 果 如 图 9-22 所 示 。 可 以 看 到 ， 一 个 表格 中 列 标题 一 行 背景 色 显示 
为 浅 蓝 色 ， 并 且 表 格 中 奇数 行 背 景色 为 浅 灰 色 ， 而 偶数 行 背景 色 为 默认 的 白色 。 


-o x 
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| Ee 学 生成 绩 表 
B3 = ne EEL 
+ 四 = = 
HE a rry = 
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Sh 0 5E 86 
hae w% 37 Py 
an 5 EJ w 
FE 75 L x 

Bass 75 
Æ 9-21 设置 table 样式 图 9-22 设置 奇数 行 背景 色 


添加 CSS 代码 ， 实 现 鼠 标 悬 浮 变 色 : 


tr:hover td { 
background-color: #FF9900; 
} 


在 IE 11.0 中 浏览 ， 效 果 如 图 9-23 所 示 。 可 以 看 到 ， 当 鼠标 放 到 不 同行 上 面 时 ， 其 背景 
会 显示 不 同 的 颜色 。 




















o x 
司 \eers\admineron O + C | 局 有 
xt seo SEM uarw TAM RROD 
a4 
学 生成 绩 表 
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图 9-23 ”鼠标 悬浮 改变 颜色 
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9.7 高 手 解 惑 


疑问 1: 在 Dreamweaver CC 中 如 何 选择 多 个 单元 格 ? 


答 : 在 Dreamweaver CC 中 选择 单元 格 的 操作 类 似 于 文字 处 理工 具 Word， 按 住 鼠 标 左 键 
拖 动 鼠 标 ， 经 过 的 单元 格 都 会 被 选中 。 按 住 Ctrl 键 ， 单 击 某 个 单元 格 ， 该 单元 格 将 会 被 选 


中 ， 这 些 单元 格 可 以 是 连续 的 ， 也 可 以 是 不 连续 的 。 在 需要 选择 区 域 的 开头 单元 格 中 单 各 





ti, 


按 住 Shift 键 ， 在 区 域 的 末尾 单元 格 中 单 击 ， 开 头 和 结尾 单元 格 组 成 的 区 域内 的 所 有 单元 格 将 





会 被 选中 。 
疑问 2: 表格 除了 显示 数据 ， 还 可 以 进行 布局 ， 为 何不 使 用 表格 进行 布局 ? 


E: 在 互联 网 刚刚 开始 普及 时 ， 网 页 非常 简单 ， 形 式 也 很 单调 ， 当 时 美国 的 David Siegel 
发 明了 使 用 表格 布局 ， 风 靡 全 球 。 在 表格 布局 的 页 面 中 ， 表 格 不 但 需要 显示 内 容 ， 还 要 控制 
页 面 的 外 观 及 显示 位 置 ， 导 致 页 面 代码 过 多 ， 结 构 与 内 容 无 法 分 离 ， 这 样 就 给 网 站 的 后 期 维 


护 和 其 他 方面 带 来 了 麻烦 。 
疑问 3: 使 用 <thead>、<tbody> 和 <tfoot> 标 记 对 行进 行 分 组 的 意义 何在 ? 


答 : 在 HTML 文档 中 增加 <thead>、<tbody> 和 <tfoot> 标 记 ， 虽 然 从 外 观 上 不 能 看 出 任何 
变化 ， 但 是 它们 能 使 文档 的 结构 更 加 清晰 。 使 用 <thead>、<tbody> 和 <tfoot> 标 记 除 了 使 文档 更 


加 清晰 外 ， 还 有 一 个 更 重要 的 意义 ， 就 是 方便 使 用 CSS 样式 对 表格 的 各 个 部 分 进行 修饰 ， 
而 制作 出 更 炫 的 表格 。 


从 
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目前 ， 在 网 页 上 没有 关于 音频 和 视频 的 标准 ， 多 数 音 频 和 视频 都 是 通过 插件 来 
播放 的 。 为 此 ，HTML 5 新 增 了 音频 和 视频 的 标签 。 本 章 将 讲述 音频 和 视频 的 基本 
概念 、 常 用 属性 和 浏览 器 的 支持 情况 。 


重点 案例 效果 
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10.1 audio 标签 概述 


目前 ， 大 多 数 音频 是 通过 插件 来 播放 音频 文件 的 ， 如 常见 的 播放 插件 为 Flash。 这 就 是 为 
什么 用 户 在 用 浏览 器 播放 音乐 时 ， 常 常 需要 安装 Flash 插件 的 原因 。 但 是 ， 并 不 是 所 有 的 浏览 
器 都 拥有 同样 的 插件 。 为 此 ， 与 HTML 4 相 比 ，HTML 5 新 增 了 audio 标签 ， 规 定 了 一 种 包含 
音频 的 标准 方法 。 


10.1.1 案例 1 一 一 认识 audio 标签 


audio 标签 主要 是 定义 播放 声音 文件 或 者 音频 流 的 标准 。 它 支持 3 种 音频 格式 ， 分 别 为 
Ogg、MP3 和 WAV. 
如 果 需 要 在 HTML 5 网 页 中 播放 音频 ， 输 入 的 基本 格式 如 下 : 


<audio src="song.mp3" controls="controls"></audio> 


PITA 其 中 ，src 属性 规定 要 播放 的 音频 的 地 址 ，controls 属性 是 供 添加 播放 、 暂 停 
A 和 音量 控件 的 属性 。 


另外 ， 在 <audio> 和 </audio> 之 间 插 入 的 内 容 是 供 不 支持 audio 元 素 的 浏览 器 显示 的 。 
【 例 10.1】 认 识 audio 标签 (案例 文件 : ch10\10.1.html)。 


<!DOCTYPE html> 

<html> 

<head> 

<title>audio</title> 

<head> PHN AT Rt ove of! 

<body> 

<audio src="song.mp3" controls="controls"> 
您 的 浏览 器 不 支持 audio 标签 ! 

</audio> 

</body> 

</html> 


如 果 用 户 的 浏览 器 是 TE 11.0 以 前 的 版 本 ， 浏 览 效 图 10-1 不 支持 audio 标签 的 效果 
果 如 图 10-1 所 示 ， 可 见 TE 11.0 以 前 的 浏览 器 版 本 不 支 
持 audio 标签 。 

在 TE 11.0 中 浏览 ， 效 果 如 图 10-2 所 示 ， 可 以 看 到 加 载 的 音频 控制 条 并 听 到 声音 ， 此 时 
用 户 还 可 以 控制 音量 的 大 小 。 
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10-2 ”支持 audio 标签 的 效果 


10.1.2 audio 标签 的 属性 


audio 标签 的 常见 属性 和 含义 如 表 10-1 所 示 。 
# 10-1 audio 标签 的 常见 属性 





属 性 H g 

autopla 如 果 出 现 该 属性 ， 则 音频 在 就 绪 后 马上 播放 
controls_| controls( 控 制 ) 如 果 出 现 该 属性 ， 则 向 用 户 显示 控件 ， 比 如 播放 按钮 
loop loop( 循 环 ) 如 果 出 现 该 属性 ， 则 每 当 音 频 结束 时 重新 开始 播放 





如 果 出 现 该 属性 ， 则 音频 在 页 面 加 载 时 进行 加 载 ， 并 预备 播放 。 如 
果 使 用 autoplay， 则 忽略 该 属性 
sre url( 地 址 ) 要 播放 的 音频 的 URL 地 址 


另外 ，audio 标签 可 以 通过 source 属性 添加 多 个 音频 文件 ， 具 体格 式 如 下 : 


<audio controls="controls"> 
<source src="123.0gg" type="audio/ogg"> 
<source src="123.mp3" type="audio/mpeg"> 
</audio> 


preload preload( 加 载 ) 








10.1.3 浏览 器 对 audio 标签 的 支持 情况 


目前 ， 不 同 的 浏览 器 对 audio 标签 的 支持 情况 也 不 同 。 表 10-2 中 列 出 了 应 用 最 为 广泛 的 
浏览 器 对 audio 标签 的 支持 情况 。 


表 10-2 浏览 器 对 audio 标签 的 支持 情况 














音频 格式 Safari 3.0 及 
更 高 版 本 

Ogg Vorbis 

MP3 | 支持 

WAV 支持 


10.2 在 网 页 中 添加 音频 文件 


当 在 网 页 中 添加 音频 文件 时 ， 用 户 可 以 根据 自己 的 需要 ， 添 加 不 同类 型 的 音频 文件 ， 如 
添加 自动 播放 的 音频 文件 、 添 加 带 有 控件 的 音频 文件 、 添 加 循环 播放 的 音频 文件 和 添加 预 播 
放 的 音频 文件 等 。 


10.2.1 案例 2 一 一 添加 自动 播放 的 音频 文件 
autoplay 属性 规定 一 旦 音频 就 绪 ， 马 上 就 开始 播放 。 如 果 设置 了 该 属性 ， 音 频 将 自动 播 
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下 面 就 是 在 网 页 中 添加 自动 播放 音频 文件 的 相关 代码 。 
【 例 10.2】 添 加 自动 播放 的 音频 文件 (案例 文件 : ch10\10.2.html)。 


<!DOCTYPE HTML> 

<html> 

<body> 

<audio controls="controls" autoplay="autoplay"> 
<source src="song.mp3"> 

</audio> 

</body> 

</html> 


在 IE 11.0 中 浏览 ， 效 果 如 图 10-3 所 示 。 可 以 看 到 ， 网 页 中 加 载 了 音频 播放 控制 条 ， 并 
自动 播放 加 载 的 音频 文件 。 
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图 10-3 添加 自动 播放 的 音频 文件 
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10.2.2 ”案例 3 一 一 添加 带 有 控件 的 音频 文件 


者 设 


里 只 


controls 属性 规定 浏览 器 应 该 为 音频 提供 播放 控件 。 如 果 设 置 了 该 属性 ， 则 规定 不 存在 作 
置 的 脚本 控件 。 其 中 浏览 器 控件 应 该 包括 播放 、 和 暂停、 定位、 音量、 全屏 切 换 等 。 
【 例 10.3】 添 加 带 有 控件 的 音频 文件 (案例 文件 : ch10\10.3.html). 


<!DOCTYPE HTML> 

<html> 

<body> 

<audio controls="controls"> 
<source src="song.mp3"> 

</audio> 

</body> 

</html> 


在 TE 11.0 中 浏览 ， 效 果 如 图 10-4 所 示 。 可 以 看 到 ， 网 页 中 加 载 了 音频 播放 控制 条 ， 这 
有 单 击 其 中 的 “播放 ”按钮 ， 才 可 以 播放 加 载 的 音频 文件 。 
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图 10-4 添加 带 有 控件 的 音频 文件 
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第 
10.2.3 ”案例 4 一 一 添加 循环 播放 的 音频 文件 è 
章 
loop 属性 规定 当 音 频 结 束 后 将 重新 开始 播放 。 如 果 设 置 该 属性 ， 则 音频 将 循环 播放 。 I 
【 例 10.4】 添 加 循环 播放 的 音频 文件 (案例 文件 : ch10\10.4.html)。 = 
<!DOCTYPE HTML> 中 
<html> 的 
<body> a 
<audio controls="controls" loop="loop"> A 
<source src="song.mp3"> 视 
</audio> 频 
</body> 
</html> 


在 正 11.0 中 浏览 ， 效 果 如 图 10-5 所 示 。 可 以 看 到 ， 网 页 中 加 载 了 音频 播放 控制 条 ， 单 
击 “ 播 放 ” 按 钮 ， 开 始 播放 加 载 的 音频 文件 。 播 放 完毕 后 ， 音 频 文 件 将 重新 开始 播放 。 
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图 10-5 “添加 循环 播放 的 音频 文件 


10.2.4 RB 5 一 一 添加 预 播放 的 音频 文件 


preload 属性 规定 是 否 在 页 面 加 载 后 载 入 音频 。 如 果 设 置 了 autoplay 属性 ， 则 忽略 该 属 
性 。preload 属性 的 值 可 能 有 3 种 ， 分 别 如 下 。 

(1) auto: 当 页 面 加 载 后 载 入 整个 音频 。 

(2) meta: 当 页 面 加载 后 只 载 入 元 数据 。 

(3) none: 当 页 面 加 载 后 不 载 入 音频 。 

【 例 10.5】 添 加 预 播 放 的 音频 文件 (案例 文件 : ch10\10.5.htmD)。 


<!DOCTYPE HTML> 

<html> 

<body> 

<audio controls="controls" preload="auto"> 
<source src="song.mp3"> 

</audio> 

</body> 

</html> 


Æ IE 11.0 中 浏览 ， 效 果 如 图 10-6 所 示 。 可 以 看 到 ， 网 页 中 加 载 了 音频 播放 控制 条 。 
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图 10-6 添加 预 播放 的 音频 文件 
10.3 video 标签 概述 


与 音频 文件 播放 方式 一 样 ， 大 多 数 视频 文件 在 网 页 上 也 是 通过 插件 来 播放 的 ， 如 常见 的 
播放 插件 为 Flash。 由 于 不 是 所 有 的 浏览 器 都 拥有 同样 的 插件 ， 所 以 就 需要 一 种 统一 的 包含 视 
频 的 标准 方法 。 为 此 ， 与 HTML 4 相 比 ，HTML 5 新 增 了 video 标签 。 


10.3.1 案例 6 一 一 认识 video 标签 


video 标签 主要 是 定义 播放 视频 文件 或 者 视频 流 的 标准 。 它 支持 3 种 视频 格式 ， 分 别 为 
Ogg、WebM 和 MPEG 4。 

如 果 需 要 在 HTML 5 网 页 中 播放 视频 ， 输 入 的 基本 格式 如 下 : 

<video src="123.mp4" controls="controls">...</video> 

其 中 ， 在 <video> 与 </video> 之 间 插 入 的 内 容 是 供 不 支 持 video 元 素 的 浏览 器 显示 的 。 

【 例 10.6】video 标签 的 使 用 (案例 文件 : ch10\10.6.html). 

<!DOCTYPE html> 

<html> 

<head> 

<title>video</title> 

<head> 

<body> 

<video src="movie.mp4" controls="controls"> 

您 的 浏览 器 不 支持 Video 标签 ! 

</video> 

</body> 

</html> 

如 果 用 户 的 浏览 器 是 TE 11.0 以 前 的 版 本 ， 浏 览 效果 如 图 10-7 所 示 ， 可 见 TE 11.0 以 前 版 
本 的 浏览 器 不 支持 video 标签 。 

在 TE 11.0 中 浏览 ， 效 果 如 图 10-8 所 示 ， 可 以 看 到 加 载 的 视频 控制 条 界面 。 单 击 “ 播 
放 ” 按 钮 ， 即 可 查看 视频 的 内 容 ， 同 时 用 户 还 可 以 调整 音量 的 大 小 。 
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10-7 不 支持 video 标签 的 效果 10-8 支持 video 标签 的 效果 


10.3.2 video 标签 的 属性 


video 标签 的 常见 属性 及 其 含义 如 表 10-3 所 示 。 
表 10-3 video 标签 的 常见 属性 


属 性 值 描述 

autoplay | autoplay 视频 就 绪 后 马上 播放 

controls controls 向 用 户 显示 控件 ， 比 如 “播放 ”按钮 

loo] loo] 每 当 视 频 结束 时 重新 开始 播放 

preload preload 视频 在 页 面 加 载 时 进行 加 载 ， 并 预备 播放 。 如 果 使 用 autoplay， 则 忽略 该 属性 

sre url 要 播放 的 视频 的 URL 

width 宽度 值 设置 视频 播放 器 的 宽度 

height 高 度 值 设置 视频 播放 器 的 高 度 
当 视 频 未 响应 或 缓冲 不 足 时 ， 该 属性 值 链接 到 一 个 图 像 。 该 图 像 将 以 一 定 比 例 
被 显示 出 来 


由 表 10-3 可 知 ， 用 户 可 以 自 定义 视频 文件 显示 的 大 小 。 例 如 ， 如 果 想 让 视频 以 320 像素 x 
240 像素 大 小 显示 ， 可 以 加 入 width 和 height 属性 。 具 体格 式 如 下 : 


<video width="320" height="240" controls src="movie.mp4"></video> 


另外 ，video 标签 可 以 通过 source 属性 添加 多 个 视频 文件 ， 有 具体 格式 如 下 : 


<video controls="controls"> 
<source src="123.ogg" type="video/ogg"> 
<source src="123.mp4" type="video/mp4"> 
</video> 


10.3.3 ”浏览 器 对 video 标签 的 支持 情况 


目前 ， 不 同 的 浏览 器 对 video 标签 的 支持 情况 也 不 同 。 表 10-4 中 列 出 了 应 用 最 为 广泛 的 
浏览 器 对 video 标签 的 支持 情况 。 
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表 10-4 浏览 器 对 video 标签 的 支持 情况 


浏览 器 
Firefox 4.0 及 IE 11.0 及 Opera 10.6 及 | Chrome 10.0 及 | Safari 3.0 及 
更 高 版 本 更 高 版 本 

















10.4 在 网 页 中 添加 视频 文件 


当 在 网 页 中 添加 视频 文件 时 ， 用 户 可 以 根据 自己 的 需要 添加 不 同类 型 的 视频 文件 ， 如 添 
加 自动 播放 的 视频 文件 、 添 加 带 有 控件 的 视频 文件 、 添 加 循环 播放 的 视频 文件 等 ， 另 外 ， 还 
可 以 设置 视频 文件 的 高 度 和 宽度 。 


10.4.1 案例 7 一 一 添加 自动 播放 的 视频 文件 


autoplay 属性 规定 一 旦 视频 就 绪 马 上 开始 播放 。 如 果 设 置 了 该 属性 ， 视 频 将 自动 播放 。 
【 例 10.7】 添 加 自动 播放 的 视频 文件 (案例 文件 ，ch10\10.7.htmD)。 


<!DOCTYPE HTML> 

<html> 

<body> 

<video controls="controls" autoplay="autoplay"> 
<source src="movie.mp4"> 

</video> 

</body> 

</html> 


在 IE 11.0 中 浏览 ， 效 果 如 图 10-9 所 示 。 可 以 看 到 ， 网 页 中 加 载 了 视频 播放 控件 ， 并 开 
始 自动 播放 加 载 的 视频 文件 。 
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10.4.2 ”案例 8 一 一 添加 带 有 控件 的 视频 文件 è 
草 
controls 属性 规定 浏览 器 应 该 为 视频 提供 播放 控件 。 如 果 设 置 了 该 属性 ， 则 规定 不 存在 设 I 
置 的 脚本 控件 。 其 中 浏览 器 控件 应 该 包括 播放 、 和 暂停 、 定 位 、 音 量 、 全 屏 切 换 等 。 = 
【 例 10.8】 添 加 带 有 控件 的 视频 文件 (案例 文件 : ch06\10.8.html). 
<!DOCTYPE HTML> 的 
<html> 频 
<body> 入 
video controls="controls" controls="controls"> 
Fe <source src="movie.mp4"> 频 
</video> 
</body> 
</html> 





在 正 11.0 中 浏览 ， 效 果 如 图 10-10 所 示 。 可 以 看 到 ， 网 页 中 加 载 了 视频 播放 控件 ， 这 里 
只 有 单 击 其 中 的 “播放 ”按钮 ， 才 可 以 播放 加 载 的 视频 文件 。 
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10-10 ”添加 带 有 控件 的 视频 文件 


10.4.3 ”案例 9 一 一 添加 循环 播放 的 视频 文件 


loop 属性 规定 当 视 频 结束 后 将 重新 开始 播放 。 如 果 设 置 该 属性 ， 则 视频 将 循环 播放 。 
【 例 10.9】 添 加 循环 播放 的 视频 文件 (案例 文件 : ch10\10.9.html). 


<!DOCTYPE HTML> 

<html> 

<body> 

<video controls="controls" loop="loop"> 
<source src="movie.mp4"> 

</video> 

</body> 

</html> 


e 
169 ® 


HTML 5 网 页 设计 
案例 课堂 (第 ?版 ) D~- 





T 


W IE 11.0 中 浏览 ， 效 果 如 图 10-11 所 示 。 可 以 看 到 ， 网 页 中 加 载 了 视频 播放 控件 ， 单 击 
其 中 的 “播放 ”按钮 ， 开 始 播放 加 载 的 视频 文件 。 播 放 完毕 后 ， 视 频 文 件 将 重新 开始 播放 。 
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图 10-11 添加 循环 播放 的 视频 文件 
10.5 ”综合 案例 一 一 设置 视频 文件 的 高 度 与 宽度 


使 用 width 和 height 属性 可 以 设置 视频 文件 的 显示 宽度 与 高 度 ， 单 位 是 像素 。 
Em 规定 视频 的 高 度 和 宽度 是 一 个 好 习惯 。 如 果 设置 这 些 属 性 ， 在 页 面 加 载 时 会 为 
外 ”视频 预 留 出 空间 。 如 果 没 有 设置 这 些 属 性 ， 那 么 浏览 器 就 无 法 预先 确定 视频 的 尺 
寸 ， 这 样 就 无 法 为 视频 保留 合适 的 空间 。 结 果 是 ， 在 页 面 加 载 的 过 程 中 ， 其 布局 也 
会 产生 变化 。 
【 例 10.10】 设 置 视频 文件 的 高 度 与 宽度 (案例 文件 : ch10\10.10.html). 


<!DOCTYPE HTML> 

<html> 

<body> 

<video width="200" height="160" controls="controls"> 
<source src="movie.mp4"> 

</video> 

</body> 

</html> 


W TE 11.0 中 浏览 ， 效 果 如 图 10-12 所 示 。 可 以 看 到 ， 网 页 中 加 载 了 视频 播放 控件 ， 视 频 
的 显示 大 小 为 200 像素 x160 像素 。 
gF 切 勿 通过 height 和 width 属性 来 缩放 视频 。 通 过 height 和 width 属性 来 缩小 视 
i 频 ， 用 户 仍 会 下 载 原始 的 视频 (即使 在 页 面 上 它 看 起 来 较 小 )。 正 确 的 方法 是 在 网 页 
上 使 用 该 视频 前 ， 用 软件 对 视频 进行 压缩 。 
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10-12 ”设置 视频 文件 的 高 度 与 宽度 


10.6” 跟 我 学 上 机 一 一 添加 预 播放 的 视频 文件 


preload 属性 规定 是 否 在 页 面 加 载 后 载 入 视频 。 如 果 设 置 了 autoplay 属性 ， 则 忽略 该 属 
o preload 属性 的 值 可 能 有 3 种 ， 分 别 说 明 如 下 。 

(1) auto: 当 页 面 加 载 后 载 入 整个 视频 。 

(2) meta: 当 页 面 加 载 后 只 载 入 元 数据 。 

(3) none: 当 页 面 加 载 后 不 载 入 视频 。 

【 例 10.11】 添 加 预 播放 的 视频 文件 (案例 文件 : ch10\10.11.html)。 


<!DOCTYPE HTML> 

<html> 

<body> 

<video controls="controls" preload="auto"> 
<source src="movie.mp4"> 





</video> 
</body> 
</html> 
在 下 11.0 中 浏览 ， 效 果 如 图 10-13 所 示 。 可 以 看 到 ， 网 页 中 加 载 了 视频 播放 控件 。 
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10.7 高 手 解 惑 


疑问 1: 在 HTML 5 网 页 中 添加 所 支持 格式 的 视频 ， 不 能 在 Firefox 53.0 浏览 器 中 正常 播 
放 ， 为 什么 ? 


答 : 目前 ，HTML 5 的 video 标签 对 视频 的 支持 ， 不 仅 有 视频 格式 的 限制 ， 还 有 对 解码 器 
的 限制 。 具 体 规定 如 下 。 

© Ogg 格式 的 文件 需要 Thedora 视频 编码 和 Vorbis 音频 编码 。 

© MPEG 4 格式 的 文件 需要 H.264 视频 编码 和 AAC 音频 编码 。 

© WebM 格式 的 文件 需要 VP8 视频 编码 和 Vorbis 音频 编码 。 


疑问 2: 在 HTML 5 网 页 中 添加 MP4 格式 的 视频 文件 ， 为 什么 在 不 同 的 浏览 器 中 视频 控 
件 显 示 的 外 观 不 同 ? 


Æ: 在 HTML 5 中 规定 用 controls 属性 来 控制 视频 文件 的 播放 、 和 暂停 、 停 止 和 调节 音 
的 操作 。controls 是 一 个 布尔 属性 ， 一 旦 添加 了 此 属性 ， 等 于 告诉 浏览 器 需要 显示 播放 控件 并 
允许 用 户 进行 操作 。 

因为 每 一 个 浏览 器 负责 解释 内 置 视频 控件 的 外 观 ， 所 以 在 不 同 的 浏览 器 中 ， 将 会 显示 不 
同 的 视频 控件 外 观 。 


第 11 章 
使 用 HTML 5 
绘制 图 形 


HTML 5 呈现 了 很 多 新 特性 ， 其 中 一 个 最 值得 提 及 的 特性 就 是 HIML canvas. 
它 可 以 对 2D 图 形 或 位 图 进行 动态 、 脚 本 的 泻 染 。 使 用 canvas 可 以 绘制 一 个 天 形 区 
域 ， 然 后 使 用 JavaScript 可 以 控制 其 每 一 个 像素 。 例如， 可 以 用 它 来 画图 、 合 成 图 
像 ， 或 制作 简单 的 动画 。 本 章 介绍 如 何 使 用 HIML 5 绘制 图 形 。 


重点 案例 效果 
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11.1 添加 canvas 的 步骤 


canvas 标签 是 一 个 矩形 区 域 ， 它 包含 width 和 height 两 个 属性 ， 分 别 表示 和 拢 形 区 域 的 宽度 
和 高 度 。 这 两 个 属性 都 是 可 选 的 ， 并 且 都 可 以 通过 CSS 来 定义 ， 其 默认 值 是 300px 和 
150px。 
canvas 在 网 页 中 的 常用 形式 如 下 : 
<canvas id="myCanvas" width="300" height="200" 
style="border:lpx solid #c3c3c3;"> 


Your browser does not support the canvas element. 
</canvas> 





在 上 述 示例 代码 中 ，id 表示 画布 对 象 名 称 ，width 和 height 分 别 表 示 宽 度 和 高 度 。 最 初 的 
画布 是 不 可 见 的 ， 此 处 为 了 观察 这 个 矩形 区 域 ， 这 里 使 用 CSS 样式 ， 即 style 标记 。style 表 
示 画 布 的 样式 。 如 果 浏 览 器 不 支持 画布 标记 ， 会 显示 画布 中 间 的 提示 信息 。 

画布 canvas 本 身 不 具有 绘制 图 形 的 功能 ， 它 只 是 一 个 容器 。 如 果 读 者 对 于 Java 语言 非常 
了 解 ， 就 会 发 现 HIML 5 的 画布 和 Java 中 的 Panel 面板 非常 相似 ， 都 可 以 在 容器 中 绘制 图 
形 。 既 然 canvas 画布 元 素 放 好 了 ， 就 可 以 使 用 脚本 语言 JavaScript 在 网 页 上 绘制 图 形 了 。 

使 用 canvas 结合 JavaScript 绘制 图 形 ， 一 般 情况 下 需要 下 面 几 个 步骤 。 

SSP JavaScript 使 用 id 来 寻找 canvas 元 素 ， 即 获取 当前 画布 对 象 : 


var c = document .getElementById("myCanvas"); 


SED 创建 context 对 象 : 

var cxt = c.getContext ("2d"); 

getContext 方法 返回 一 个 指定 contextld 的 上 下 文 对 象 。 如 果 指 定 的 id 不 被 支持 ， 则 返回 
null， 当 前 唯一 被 强制 必须 支持 的 是 24， 也 许 在 将 来 会 有 3d。 注 意 ， 指 定 的 id 是 大 小 写 敏感 
的 。 对 象 cxt 建立 之 后 ， 就 可 以 拥有 多 种 绘制 路 径 、 和 矩形 、 圆 形 、 字 符 及 添加 图 像 的 方法 。 

(step 0S 绘制 图 形 : 


cxt.fillStyle = "#FF0000"; 
cxt.fillRect (0,0,150,75); 


fillStyle 方法 将 其 染 成 红色 ，fillRect 方法 规定 了 形状 、 位 置 和 尺寸 。 这 两 行 代码 绘制 一 个 
红色 的 矩形 。 


11.2 ”绘制 基本 形 ; 


画布 canvas 结合 JavaScript 可 以 绘制 简单 的 矩形 ， 还 可 以 绘制 一 些 其 他 的 常见 图 形 ， 如 
直线 、 圆 等 。 


11.2.1 案例 1 一 一 绘制 矩形 
用 canvas 和 JavaScript 绘制 矩形 时 ， 涉 及 一 个 或 多 个 方法 ， 这 些 方法 如 表 11-1 所 示 。 


表 11-1 绘制 矩形 的 方法 


功 能 
绘制 一 个 矩形 ， 这 个 矩形 区 域 没有 边框 ， 只 有 填充 色 。 这 个 方法 有 4 个 参数 ， 前 两 个 表示 
左上 角 的 坐标 位 置 ， 第 3 个 参数 为 长 度 ， 第 4 个 参数 为 高 度 
strokeRect | 绘制 一 个 带 边框 的 矩形 。 该 方法 的 4 个 参数 的 解释 同上 


clearRect | 清除 一 个 矩形 区 域 ， 被 清除 的 区 域 将 没有 任何 线条 。 该 方法 的 4 个 参数 的 解释 同上 
【 例 11.1】 绘 制 窍 形 (案例 文件 : chll\11.1.htmD)。 


<!DOCTYPE html> 
<html> 
<body> 
<canvas id="myCanvas" width="300" height="200" 
style="border:lpx solid blue"> 
Your browser does not support the canvas element. 
</canvas> 
<script type="text/javascript"> 
var c = document .getElementById("myCanvas") ; 
var cxt = c.getContext ("2d"); 
ext.fillstyle = "rgb(0,0,200)"; 
ext.fillRect (10,20,100,100); 
</script> 
</body> 
</html> 


在 上 述 代码 中 ， 定 义 了 一 个 画布 对 象 ， 其 id 名 称 为 myCanvas， 高 度 和 宽度 分 别 为 200 和 
300 像素 ， 并 定义 了 画布 边框 的 显示 样式 。 代 码 中 首先 获取 画布 对 象 ， 然 后 使 用 getContext 获 
取 当 前 2d 的 上 下 文 对 象 ， 并 使 用 fillRect 绘制 一 个 矩形 。 其 中 涉及 一 个 fillstyle 属性 ， 
fillStyle 用 于 设 定 填充 的 颜色 、 透 明度 等 ， 如 果 设 置 为 rgb(200.0.0)， 则 表示 一 个 不 透明 颜色 ; 
如 果 设 置 为 rgba(0,0,200,0.5)， 则 表示 一 个 透明 度 为 50% 的 颜色 。 

在 TE 11.0 中 浏览 ， 效 果 如 图 11-1 所 示 。 可 以 看 到 ， 在 一 个 蓝 色 边 框 内 显示 了 一 个 蓝 色 
ETB. 
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11.2.2 ”案例 2 一 一 绘制 圆 形 


在 画布 中 绘制 圆 形 ， 可 能 要 涉及 下 面 几 个 方法 ， 如 表 11-2 所 示 。 
表 11-2 绘制 贺 形 的 方法 








方 法 功 能 
beginPath() 开始 绘制 路 径 
arc(x,y,radius,startAngle, x 和 y 定义 的 是 圆 的 原点 ; radius 是 圆 的 半径 ，startAngle 和 endAngle 是 弧 
endAngle.anticlockwise) BE, AREER; anticlockwise 用 来 定义 画 圆 的 方向 ， 值 是 true 或 false 
、 closePath 结束 路 径 的 绘制 
W fill 进行 填充 
stroke 该 方法 设置 边框 





路 径 是 绘制 自 定义 图 形 的 好 方法 。 在 canvas 中 ， 通 过 beginPath() 方 法 开始 绘制 路 径 ， 这 
个 时 候 ， 就 可 以 绘制 直线 、 曲 线 等 。 绘 制 完成 后 ， 调 用 fll0 和 stroke0 方 法 完成 填充 和 边框 设 
置 ， 通 过 closePath() 方 法 结束 路 径 的 绘制 。 

【 例 11.2】 绘 制 圆 形 (案例 文件 : ch11\11.2.html)。 


<!DOCTYPE html> 
<html><body> 
<canvas id="myCanvas" width="200" height="200" 
style="border:lpx solid blue"> 
Your browser does not support the canvas element. 
</canvas> 
<script type="text/javascript"> 
var c = document.getElementById("myCanvas") ; 
var cxt = c.getContext ("2d"); 
ext.fillStyle = "#FFaa00"; 
cxt.beginPath (); 
cext.arc(70,18,15,0,Math.PI*2,true) ; 
cxt.closePath(); 
ext.fill(); 
</script> 
</body></htm1> 


在 上 面 的 JavaScript 代码 中 ， 使 用 beginPath0 方 法 开启 一 个 路 径 ， 然 后 绘制 一 个 贺 形 ， 最 
后 关闭 这 个 路 径 并 填充 。 在 下 11.0 中 浏览 ， 效 果 如 图 11-2 所 示 。 
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11.2.3 ”案例 3 一 一 使 用 moveTo 与 lineTo 绘制 直线 


绘制 直线 常用 的 方法 是 moveTo 和 lineTo， 其 含义 如 表 11-3 所 示 。 
表 11-3 绘制 直线 的 方法 





方法 或 属性 功 能 
moveTo(x,y) | 不 绘制 ， 只 是 将 当前 位 置 移动 到 新 目标 坐标 (x.y)， 并 作为 线条 的 开始 点 
绘制 线条 到 指定 的 目标 坐标 (x.y)， 并 且 在 两 个 坐标 之 间 画 一 条 直线 。 不 管 调用 它们 哪 一 
lineTo(x,y) 个 ， 都 不 会 真正 画 出 图 形 ， 因 为 还 没有 调用 stroke 和 fill 函数 。 当 前 ， 只 是 在 定义 路 径 的 
位 置 ， 以 便 后 面 绘制 时 使 用 
StrokeStyle 指定 线条 的 颜色 
lineWidth 设置 线条 的 粗细 





【 例 11.3】 使 用 moveTo 与 lineTo 绘制 直线 (案例 文件 : chll\11.3.html)。 


<!DOCTYPE html> 
<html> 
<body> 
<canvas id="myCanvas" width="200" height="200" 
style="border:lpx solid blue"> 
Your browser does not support the canvas element. 
</canvas> 
<script type="text/javascript"> 
var c = document .getElementById("myCanvas") ; 
var cxt = c.getContext ("2d"); 
cxt.beginPath (); 
ext.strokeStyle = "rgb(0,182,0)"; 
cxt.moveTo (10,10); 
cext.lineTo (150,50); 
cxt.lineTo (10,50); 
cxt.lineWidth = 14; 
cxt.stroke(); 
cxt.closePath(); 
</script> 
</body> 
</html> 


在 上 述 代码 中 ， 使 用 moveTo0 方 法 定义 一 个 坐标 位 | = 
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同 的 直线 ， 并 用 lineWidth 设置 了 直线 的 宽度 ， 用 ~ 
strokeStyle 设置 了 直线 的 颜色 ， 用 lineTo0 设 置 了 两 条 不 
同 直 线 的 结束 位 置 。 

在 正 11.0 中 浏览 ， 效 果 如 图 11-3 所 示 。 可 以 看 到 ， 
网 页 中 绘制 了 两 条 直线 ， 这 两 条 直线 在 某 一 点 交叉 。 


置 为 (10.10)， 然 后 以 此 坐标 位 置 为 起 点 ， 绘 制 了 两 条 不 SSS So 
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11.2.4 ”案例 4 一 一 使 用 bezierCurveTo 绘制 贝 济 埃 曲线 


在 数学 的 数值 分 析 领 域 中 ， 贝 济 埃 (Bézier) 曲 线 是 电脑 图 形 学 中 非常 重要 的 参数 曲线 。 更 
高 维度 的 广泛 化 贝 济 埃 曲线 就 称 作 贝 济 埃 曲 面 ， 其 中 贝 济 埃 三 角 是 一 种 特殊 的 实例 。 

bezierCurveTo0 表 示 为 一 个 画布 的 当前 子路 径 添加 一 条 三 次 贝 济 埃 曲线 。 这 条 曲线 的 开始 
点 是 画布 的 当前 点 ， 而 结束 点 是 (x, y)。 两 条 贝 济 埃 曲 线 的 控制 点 (cpX1, cpY1) 和 (cpX2, cpY2) 
定义 了 曲线 的 形状 。 当 这 个 方法 返回 的 时 候 ， 当 前 的 位 置 为 (x, y)。 

方法 bezierCurveTo 的 语法 格式 如 下 : 

bezierCurveTo (CPX1， cpYl, cpX2, cpY2, x, y) 


其 参数 的 含义 如 表 11-4 所 示 。 
表 11-4 绘制 贝 济 埃 曲线 的 参数 





与 曲线 的 开始 点 (当前 位 置 ) 相 关联 的 控制 点 的 坐标 


与 曲线 的 结束 点 相关 联 的 控制 点 的 坐标 
曲线 的 结束 点 的 坐标 


【 例 11.4】 使 用 bezierCurveTo 绘制 贝 济 埃 曲 线 (案例 文件 : ch11\11.4.html). 


<!DOCTYPE html> 
<html> 
<head> 
<tit1le> 贝 济 埃 曲线 </title> 
<script> 
function draw (id) 
{ 
var canvas = document.getElementBylId (id); 
if (canvas==null1) 
return false; 
var context = canvas.getContext ('2d'); 
context.fillStyle = "#eeeeff"; 
context.fillRect (0,0,400, 300); 
var n = 0; 
var dx = 150; 
var dy = 150; 
var s = 100; 
context.beginPath (); 
context.globalCompositeOperation = 'and'; 
context.fillStyle = 'rgb(100,255,100)'; 
context.strokeStyle = 'rgb(0,0,100)'; 
var x = Math.sin(0); 
var y = Math.cos(0); 
var dig = Math.PI/15*11; 
for(var i=0; i<30; i++) 
{ 
var x 
var y 





Math.sin(i*dig); 
Math.cos (i*dig); 


e 
Oi 


context -bezierCurveTo ( 
dx+x*s,dy+y*s—100, dx+x*s+100, dy+y*s, dx+x*s,dy+y*s) 7 

} 

context .closePath (); 

context.fill(); 

context.stroke(); 
$ 
</script> 
</head> 
<body onload="draw ('canvas'); "> 
<h1> 绘 制 元 素 </h1> 
<canvas id="canvas" width="400" height="300" /> 
</body> 
</html> 


在 上 面 的 draw0 函 数 代码 中 ， 首 先 使 用 fillRect(0.0,400.300) 语 句 绘制 了 一 个 矩形 ， 其 大 小 
与 画布 相同 ， 填 充 颜 色 为 浅 青 色 。 然 后 定义 了 几 个 变量 ， 用 于 设 定 曲线 的 坐标 位 置 ， 在 forth 
环 中 使 用 bezierCurveTo 绘制 贝 济 埃 曲 线 。 在 TE 11.0 中 浏览 ， 效 果 如 图 11-4 所 示 。 可 以 看 
到 ， 网 页 中 显示 了 一 个 贝 济 埃 曲线 。 
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11-4 “ 贝 济 埃 曲 线 
11.3 ”绘制 渐变 图 形 


渐变 是 两 种 或 更 多 颜色 的 平滑 过 渡 ， 是 指 在 颜色 集 上 使 用 逐步 抽样 算法 ， 并 将 结果 应 用 
于 描 边 样式 和 填充 样式 中 。canvas 的 绘图 上 下 文 支持 两 种 类 型 的 渐变 : 线性 渐变 和 放射 性 渐 


变 ， 其 中 ， 放 射 性 渐变 也 称 为 径 向 渐变 。 
11.3.1 案例 5 一 一 绘制 线性 渐变 
创建 一 个 简单 的 渐变 非常 容易 。 使 用 渐变 需要 如 下 3 个 步骤 。 
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createLinearGradient(x0,y0.x1,y1 
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EET 创建 渐变 对 象 : 
var gradient = cxt.createLinearGradient (0,0,0,canvas.height) ; 


为 渐变 对 象 设置 颜色 ， 指 明 过 渡 方式 : 


gradient.addColorstop(0, '#fff"'); 
gradient .addColorStop(1,'#000'); 


在 context 上 为 填充 样式 或 者 描 边 样式 设置 渐变 : 


cxt.fillStyle = gradient; 


要 设置 显示 颜色 ， 在 渐变 对 象 上 使 用 addColorStop 函数 即 可 。 除 了 可 以 变换 成 其 他 颜色 


表 11-5 绘制 线性 渐变 的 方法 


代表 沿 着 渐变 线 渐变 的 距离 有 多 远 
沿 着 直线 从 Cx0.y0) 至 (x1.y1D 绘 制 渐变 


【 例 11.5】 绘 制 线性 渐变 (案例 文件 : chll\11.5.html)。 


<!DOCTYPE html> 
<html> 

<head> 
<title> 线 性 渐变 </title> 
</head> 

<body> 





<h1> 绘 制 线性 渐变 </h1> 
<canvas id="canvas" width="400" height="300" 
style="border:lpx solid red"/> 


<script type="text/javascript"> 

var c = document .getElementById ("canvas"); 
var cxt = c.getContext ("2d"); 

var gradient = cxt.createLinearGradient (0,0,0,canvas.height) ; 
gradient .addColorStop(0,'#fff"'); 

gradient .addColorStop(1,'#000"'); 
cext.fillStyle = gradient; 

ext.fillRect (0,0,400,400); 

</script> 

</body> 

</html> 


上 述 代码 使 用 2D 环境 对 象 产生 了 一 个 线性 渐变 对 象 ， 渐 变 的 起 始点 是 (0,0)， 


外 ， 还 可 以 为 颜色 设置 Alpha 值 ， 并 且 Alpha 值 也 是 可 以 变化 的 。 为 了 达到 这 样 的 效果 ， 需 
要 使 用 颜色 值 的 另 一 种 表示 方法 ， 如 内 置 Alpha 组 件 的 CSSrgba 函数 。 绘 制 线性 渐变 时 ， 会 
用 到 下 面 几 个 方法 ， 如 表 11-5 所 示 。 


方 法 功 能 
人 允许 指定 两 个 参数 : 颜色 和 偏 移 量 。 颜 色 参 数 是 指 开发 人 员 希 望 在 偏 
addColorStop 移 位 置 描 边 或 填充 时 所 使 用 的 颜色 。 偏 移 量 是 一 个 0.0~1.0 的 数值 ， 


渐变 的 结束 


点 是 (0,canvas.height)， 然 后 使 用 addColorStop 函数 设置 渐变 颜色 ， 最 后 将 渐变 填充 到 上 下 文 
环境 的 样式 中 。 

在 TE 11.0 中 浏览 ， 效 果 如 图 11-5 所 示 。 可 以 看 到 ， 在 网 页 中 创建 了 一 个 垂直 方向 上 的 
渐变 ， 从 上 到 下 颜色 逐渐 变 深 。 
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11.3.2 ”案例 6 一 一 绘制 径 向 渐变 


径 向 渐变 即 放射 性 渐变 ， 是 指 颜色 会 介 于 两 个 指定 圆 之 间 的 锥 形 区 域 平 滑 变化 。 径 
向 渐变 与 线性 渐变 使 用 的 颜色 终止 点 是 一 样 的 。 如 果 要 实现 径 向 渐变 ， 需 要 使 用 
createRadialGradient 方法 。 

createRadialGradient(x0,y0,r0,x1,yl,r1) 方 法 表示 沿 着 两 个 圆 之 间 的 锥 面 绘 制 渐变 。 其 中 前 
3 个 参数 代表 开始 的 圆 ， 圆 心 为 (x0,y0)， 半 径 为 rr。 后 3 个 参数 代表 结束 的 圆 ， 圆 心 为 
(xl,y1)， 半 径 为 rl1。 

【 例 11.6】 绘 制 径 向 渐变 (案例 文件 : chll\11.6.html)。 


<!DOCTYPE html> 
<html> 
<head> 
<title> 径 向 渐变 </title> 
</head> 
<body> 
<h1> 绘 制 径 向 渐变 </h1> 
<canvas id="canvas" width="400" height="300" style="border:lpx solid red"/> 
<script type="text/javascript"> 
var c = document.getElementById ("canvas"); 
var cxt = c.getContext ("2d"); 
var gradient = cxt.createRadialGradient ( 
canvas .width/2, canvas -height/2,0,canvas.width/2,canvas.height/2,150); 
gradient .addColorStop(0,'#fff"); 
gradient .addColorStop(1,'#000"'); 
ext.fillStyle = gradient; 
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cxt.fillRect (0,0,400,400); 
</script> 

</body> 

</html> 


在 上 述 代码 中 ， 首 先 创 建 渐变 对 象 gradient， 此 处 使 用 createRadialGradient 方法 创建 了 一 





个 径 向 渐变 ， 然 后 使 用 addColorStop 添加 颜色 ， 最 后 将 渐变 填充 到 上 下 文 环境 中 。 


在 TE 11.0 中 浏览 ， 效 果 如 图 11-6 所 示 。 可 以 看 到 ， 在 网 页 中 ， 从 圆 的 中 心 亮点 开始 ， 





向 外 逐步 发 散 ， 形 成 了 一 个 径 向 渐变 。 


使 
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图 11-6 径 向 渐变 
11.4 ”绘制 变形 图 形 


画布 canvas 不 但 可 以 使 用 moveTo 这 样 的 方法 来 移动 画笔 ， 来 绘制 图 形 和 线条 ， 还 可 以 
变换 来 调整 画笔 下 的 画布 ， 变 换 的 方法 包括 : 平移 、 缩 放 、 旋 转 、 组 合 和 带 缩 影 等 。 


11.4.1 案例 7 一 一 绘制 平移 效果 的 图 形 


如 果 要 对 图 形 实现 平移 ， 需 要 使 用 translate(x.y) 方 法 ， 该 方法 表示 在 平面 上 平移 ， 即 原来 





原点 为 参考 ， 然 后 以 偏 移 后 的 位 置 作为 坐标 原点 。 也 就 是 说 ， 原 来 在 (100,100)， 然 后 
translate(1.1)， 新 的 坐标 原点 在 (101.101) 而 不 是 (1.1)。 


【 例 11.7】 绘 制 平移 效果 的 图 形 (案例 文件 : ch11\11.7.html)。 


<!DOCTYPE html> 
<html> 
<head> 


<title> 绘 制 坐标 变换 </title> 





<script> 
function draw(id) 
{ 
var canvas = document.getElementBylId (id); 
if (canvas==null) 
return false; 
var context = canvas.getContext ('2d'); 
context.fillStyle = "#eeeeff"; 
context. fillRect (0,0,400,300); 
context.translate (200,50); 
context.fillStyle = 'rgba(255,0,0,0.25)'; 
for(var i=0; i<50; i++) { 
context.translate (25,25); 
context.fillRect (0,0,100,50); 
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} 





} \ 
</script> 
</head> NS 


<body onload="draw('canvas');"> N 
<h1> 变 换 原点 坐标 </h1> N 
<canvas id="canvas" width="400" height="300" /> 
</body> 

</html> 

在 draw0 函 数 中 ， 使 用 fillRect 方法 绘制 了 一 个 矩形 ， 然 后 使 用 translate 方法 平移 到 一 个 
新 位 置 ， 并 从 新 位 置 开 始 ， 使 用 for 循环 ， 连 续 移动 多 次 坐标 原点 ， 即 多 次 绘制 矩形 。 

在 TE 11.0 中 浏览 ， 效 果 如 图 11-7 所 示 。 可 以 看 到 ， 在 网 页 中 从 坐标 位 置 (200.50) 开 始 绘 
制 矩形 ， 并 每 次 以 指定 的 平移 距离 绘制 矩形 。 
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11.4.2 ”案例 8 一 一 绘制 缩放 效果 的 图 形 
对 变形 图 形 来 说 ， 其 中 最 常用 的 方式 就 是 对 图 形 进行 缩放 ， 即 以 原来 的 图 形 为 参考 ， 放 
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大 或 者 缩小 图 形 ， 从 而 增加 效果 。 

如 果 要 实现 图 形 缩放 ， 需 要 使 用 scale(x,y) 函 数 ， 该 函数 带 有 两 个 参数 ， 分 别 代 表 在 xy 
两 个 方向 上 的 值 。 每 个 参数 在 canvas 显示 图 像 的 时 候 ， 向 其 传递 在 本 方向 轴 上 图 像 要 放大 (或 
者 缩小 ) 的 量 。 如 果 x 值 为 2， 就 代表 所 绘制 的 图 像 中 全 部 元 素 都 会 变 成 2 倍 宽 。 如 果 y 值 为 
0.5， 绘 制 出 来 的 图 像 全 部 元 素 都 会 变 成 先前 的 一 半 高 。 

【 例 11.8】 绘 制 缩放 效果 的 图 形 (案例 文件 :ch11\11.8.html)。 


<!DOCTYPE html> 
<html> 


<head> 
<title> 绘 制图 形 缩放 </title> 
<script> 
function draw(id) 
{ 
var canvas = document .getElementById (id); 
if (canvas==null) 
return false; 
var context = canvas.getContext ('2d'); 
context.fillStyle = "#eeeeff"; 
context.fillRect (0,0,400, 300); 
context.translate (200,50); 
context.fillStyle = 'rgba(255,0,0,0.25)'; 
for(var i=0; i<50; i++) { 
context.scale(3,0.5); 
context.fillRect (0,0,100,50); 





} 
} 
</script> 
</head> 
<body onload="draw('canvas');"> 
<h1> 图 形 缩放 </h1> 
<canvas id="canvas" width="400" height="300" /> 
</body> 
</html> 


在 上 述 代码 中 ， 缩 放 操作 是 放 在 for 循环 中 完成 的 ， 在 此 循环 中 ， 以 原来 图 形 为 参考 物 ， 
使 其 在 x 轴 方 向 增加 为 3 倍 宽 ， 在 y 轴 方 向 上 变 为 原来 的 一 半 。 
在 正 11.0 中 浏览 ， 效 果 如 图 11-8 所 示 。 可 以 看 到 ， 在 一 个 指定 方向 上 绘制 了 多 个 矩形 。 
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图 11-8 图 形 缩放 


11.4.3 ”案例 9 一 一 绘制 旋转 效果 的 图 形 


变换 操作 并 不 限于 平移 和 缩放 ， 还 可 以 使 用 函数 contextrotate(angle) 来 旋转 图 像 ， 甚 至 可 
以 直接 修改 底层 变换 矩阵 以 完成 一 些 高 级 操作 ， 如 剪裁 图 像 的 绘制 路 径 。 

例如 ，context.rotate(1.57) 表 示 旋 转角 度 参 数 以 弧度 为 单位 。rotate0 方 法 默认 地 从 左上 端 
的 (0.0) 开 始 旋转 ， 通 过 指定 一 个 角度 ， 改 变 了 画布 坐标 和 Web 浏览 器 中 的 <canvas> 元 素 的 像 
素 之 间 的 映射 ， 使 得 任意 后 续 绘图 在 画布 中 都 显示 为 旋转 的 。 

【 例 11.9】 绘 制 旋转 效果 的 图 形 (案例 文件 : ch11\11.9.html). 


<!DOCTYPE html> 
<html> 


<head> 
<title> 绘 制 旋转 图 像 </title> 
<script> 
function draw(id) 
{ 
var canvas = document.getElementById (id); 
if (canvas==null) 
return false; 
var context = canvas.getContext ('2d'); 
context.fillStyle = "#eeeeff"; 
context.fillRect (0,0,400, 300); 
context.translate (200,50); 
context.fillStyle = 'rgba(255,0,0,0.25)'; 
for(var i=0; i<50; i++) { 
context.rotate (Math. PI/10); 
context.fillRect (0,0,100,50); 
} 


<fscript> 

</head> 

<body onload="draw ('canvas'); "> 
chisel E< /hn1> 

<canvas id="canvas" width="400" height="300" /> 
</body> 

</html> 


在 上 述 代 码 中 ， 使 用 rotate 方法 ， 在 for 循环 中 对 多 个 图 形 进行 了 旋转 ， 其 旋转 角度 相 
同 。 在 TE 11.0 中 浏览 ， 效 果 如 图 11-9 所 示 。 可 以 看 到 ， 多 个 矩形 以 中 心 弧度 为 原点 进行 了 
旋转 。 
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这 个 操作 并 没有 旋转 <canvas> 元 素 本 身 。 而 且 ， 旋 转 的 角度 是 用 弧度 指定 的 。 


11.4.4 “案例 10 一 一 绘制 组 合 效果 的 图 形 


在 前 面 介绍 的 知识 中 ， 可 以 将 一 个 图 形 画 在 另 一 个 之 上 。 在 大 多 数 情况 下 ， 这 样 是 不 够 
的 。 例 如 ， 这 样 会 受制 于 图 形 的 绘制 顺序 。 不 过 ， 我 们 可 以 利用 globalCompositeOperation 属 
N 性 来 改变 这 些 做 法 ， 不 仅 可 以 在 已 有 图 形 后 面 再 画 新 图 形 ， 还 可 以 用 来 遮盖 、 清 除 ( 比 
N% clearRect 方法 强劲 得 多 ) 某 些 区 域 。 

其 语法 格式 如 下 : 

globalCompositeOperation = type 

这 表示 设置 不 同形 状 的 组 合 类 型 ， 其 中 type 表示 方 的 图 形 是 已 经 存在 的 canvas 内 容 ， 
的 图 形 是 新 的 形状 ， 其 默认 值 为 source-over， 表 示 在 canvas 内 容 上 面 画 新 的 形状 。 

type 具有 12 个 属性 值 ， 有 具体 说 明 如 表 11-6 所 示 。 


表 11-6 type 的 属性 值 





属性 值 说 明 
source-over(default) 这 是 默认 设置 ， 新 图 形 会 覆盖 在 原 有 内 容 之 上 
destination-over 会 在 原 有 内 容 之 下 绘制 新 图 形 
source-in 新 图 形 会 仅仅 出 现在 与 原 有 内 容重 登 的 部 分 ， 其 他 区 域 都 变 成 透明 的 
destination-in 原 有 内 容 中 与 新 图 形 重 登 的 部 分 会 被 保留 ， 其 他 区 域 都 变 成 透明 的 
source-out 结果 是 只 有 新 图 形 中 与 原 有 内 容 不 重合 的 部 分 会 被 绘制 出 来 
destination-out 原 有 内 容 中 与 新 图 形 不 重合 的 部 分 会 被 保留 
source-atop 新 图 形 中 与 原 有 内 容重 登 的 部 分 会 被 绘制 ， 并 覆盖 于 原 有 内 容 之 上 
destination-atop 原 有 内 容 中 与 新 内 容重 登 的 部 分 会 被 保留 ， 并 会 在 原 有 内 容 之 下 绘制 新 图 形 
lighter 两 图 形 中 重合 的 部 分 做 加 色 处 理 
darker 两 图 形 中 重合 的 部 分 做 减 色 处 理 
xor 重 县 的 部 分 会 变 成 透明 
copy 只 有 新 图 形 会 被 保留 ， 其 他 都 被 清除 掉 


【 例 11.10】 绘 制 组 合 效果 的 图 形 (案例 文件 : ch11\11.10.html). 


<!DOCTYPE html> 
<html> 
<head> 
<title> 绘 制图 形 组 合 </title> 
<script> 
function draw(id) 
{ 
var canvas = document .getElementById (id); 
if (canvas==null) 
return false; 
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var context = canvas.getContext ('2d'); 

var oprtns = new Array( 
"source-atop", 
*"source-in", 
"source-out", 
"source-over", 
"destination-atop", 
"destination-in", 
"destination-out", 
"destination-over", 
"lighter", 
"copy", 
Onn 
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Ne 
var i = 10; 
context.fillStyle = "blue"; 
context. fillRect (10,10,60,60); 
context.globalCompositeOperation = oprtns[i]; 
context.beginPath (); 
context.fillstyle = "red"; 
context .arc(60,60,30,0,Math.PI*2, false); 
context.fill(); 
i 
</script> 
</head> 
<body onload="draw ('canvas'); "> 
<h1> 图 形 组 合 </h1> 
<canvas id="canvas" width="400" height="300" /> 
</body> 
</html> 


在 上 述 代码 中 ， 首 先 创建 了 一 个 oprtns 数组 ， 用 于 存储 type 的 12 个 值 ， 然 后 绘制 了 一 个 
矩形 ， 并 使 用 content 上 下 文 对 象 设 置 了 图 形 的 组 合 方式 ， 即 采用 新 图 形 显示 、 其 他 被 清除 的 
方式 ， 最 后 使 用 arc 绘制 了 一 个 圆 。 

在 IE 11.0 中 浏览 ， 效 果 如 图 11-10 所 示 。 可 以 看 到 ， 页 面 上 绘制 了 一 个 矩形 和 圆 ， 但 矩 
形 和 圆 接 触 的 地 方 以 空白 显示 。 
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11.4.5 ”案例 11 一 一 绘制 带 阴影 的 图 形 


在 画布 canvas 上 绘制 带 有 阴影 效果 的 图 形 非常 简单 ， 只 需要 设置 几 个 属性 即 可 。 这 些 属 


性 分 别 为 shadowOffsetX、shadowOffsetY、shadowBlur 和 shadowColor。 


属性 shadowColor 表示 阴影 的 颜色 ， 其 值 与 CSS 颜色 值 一 致 。shadowBlur 表示 设置 阴影 


模糊 程度 ， 此 值 越 大 ， 阴 影 越 模糊 。shadowOffsetX 和 shadowOffsetY 属性 表示 阴影 的 x 和 了 
偏 移 量 ， 单 位 是 像素 。 


【 例 11.11】 绘 制 带 阴 影 的 图 形 (案例 文件 : ch11\11.11 html). 


<!DOCTYPE html> 

<html> 

<head> 

<title> 绘 制 阴影 效果 图 形 </title> 

</head> 

<body> 

<canvas id="my canvas" width="200" height="200" 

style="border:lpx solid #ff0000"> 

</canvas> 

<script type="text/javascript"> 

var elem = document.getElementById("my canvas"); 

if (elem && elem.getContext) { 
var context = elem.getContext ("2d"); 
//shadowOffsetX 和 shadowOffsety: 阴影 的 x 和 y 偏 移 量 ， 单 位 是 像素 
context.shadowOffsetX = 15; 
context.shadowOffsetY = 15; 
//shadowBlur: 设置 阴影 模糊 程度 。 此 值 越 大 ， 阴 影 越 模糊 
// 其 效果 与 Photoshop 的 高 斯 模糊 滤 镜 相同 
context.shadowBlur = 10; 
//shadowColor: 阴影 颜色 。 其 值 与 css 颜色 值 一 致 
//context.shadowColor = 'rgba(255, 0, 0, 0.5)'; 或 下 面 的 十 六 进 制 表示 法 
context.shadowColor = '#f00'; 
context.fillStyle = '#00f'; 
context.fillRect(20, 20, 150, 100); 

} 

</script> 

</body> 

</html> 


在 TE 11.0 中 浏览 ， 效 果 如 图 11-11 所 示 。 可 以 看 到 ， 页 面 上 显示 了 一 个 蓝 色 和 矩形， 其 阴 
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11-11 带 有 阴影 的 图 形 


11.5 使 用 像 


画布 canvas 有 一 项 功能 就 是 可 以 引入 图 像 ， 以 便 用 于 图 片 合 成 或 者 制作 背景 等 。 而 目前 
仅 可 以 在 图 像 中 加 入 文字 。 只 要 是 Geck 支持 的 图 像 (如 PNG. GIF, JPEG 等 ) 都 可 以 引入 到 
canvas 中 ， 而 且 其 他 的 canvas 元 素 也 可 以 作为 图 像 的 来 源 。 


11.5.1 案例 12 一 一 绘制 图 像 


要 在 画布 canvas 上 绘制 图 像 ， 需 要 先 有 一 张 图 片 。 这 张 图 片 可 以 是 已 经 存在 的 <img> 元 
素 ， 或 者 通过 JS 创建 。 

无 论 采 用 哪 种 方式 ， 都 需要 在 绘制 canvas 之 前 完全 加 载 这 张 图 片 。 浏 览 器 通常 会 在 页 面 
脚本 执行 的 同时 异步 加 载 图 片 。 如 果 试 图 在 图 片 未 完全 加 载 之 前 就 将 其 呈现 到 canvas E, H 
么 canvas 将 不 会 显示 任何 图 片 。 

捕获 和 绘制 图 像 完 全 是 通过 drawImage() 方 法 完成 的 ， 它 可 以 接受 不 同 的 HTML 参数 ， 具 
体 含义 如 表 11-7 所 示 。 
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表 11-7 绘制 图 像 的 方法 





方 法 说 明 
接受 一 张 图 片 ， 并 将 其 画 到 canvas 中 。 给 出 的 坐标 (dx.dy) 代 
drawlamge(image,dx,dy) 表 图 片 的 左上 角 。 例 如 ， 坐 标 (0.0) 将 把 图 片 画 到 canvas 的 左 
上 角 
| 接受 一 张 图 片 ， 将 其 缩放 为 宽度 dw 和 高 度 dh， 然 后 把 它 画 
drawIamge(image,dx.dy,dw.db) 


到 canvas 上 的 (dx.dy) 位 置 
接受 一 张 图 片 ， 通 过 参数 (sx.sy.sw.sb) 指 定 图 片 裁剪 的 范围 ， 
缩放 到 (dw.dh) 的 大 小 ， 最 后 把 它 画 到 canvas 上 的 (dx.dy) 位 置 


【 例 11.12】 绘 制图 像 (案例 文件 : ch11\11.12.htm])。 


<!DOCTYPE html> 

<html> 

<head> 

<title> 绘 制图 像 </title> 

</head> 

<body> 

<canvas id="canvas" width="300" height="200" style="border:lpx solid blue"> 
Your browser does not support the canvas element. 

</canvas> 

<script type="text/javascript"> 

window.onload=function(){ 
var ctx = document .getElementById("canvas") .getContext ("2d"); 
var img = new Image(); 
img.sre = "01.jpg"; 
img.onload=function () { 


drawlamge(image.sx,sy,sw.sh,dx.dy,dw.dh) 
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ctx.drawImage (img, 0,0); 
$ 
} 
</script> 
</body> 
</html> 


在 上 述 代码 中 ， 使 用 窗口 的 onload 加 载 事件 ， 即 在 页 面 被 加 载 时 执行 函数 。 在 函数 中 ， 


创建 上 下 文 对 象 ctx， 并 创建 Image WR img; 然后 使 用 img 对 象 的 sre 属性 设置 图 片 来 源 ， 
最 后 使 用 drawImage 画 出 当前 的 图 像 。 


在 正 11.0 中 浏览 ， 效 果 如 图 11-12 所 示 。 可 以 看 到 ， 页 面 上 绘制 了 一 个 图 像 ， 并 且 在 画 
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图 11-12 绘制 图 像 


11.5.2 ”案例 13 一 一 平 铺 图 像 
使 用 画布 canvas 绘制 图 像 有 很 多 种 用 处 ， 其 中 一 个 用 处 就 是 将 绘制 的 图 像 作 为 背景 图 片 
使 用 。 在 做 背景 图 片 时 ， 如 果 显 示 图 片 的 区 域 大 小 不 能 直接 设 定 ， 通 常 将 图 片 以 平 铺 的 方式 


显示 。 
HTML 5 Canvas API 支持 图 片 平 铺 ， 此 时 需要 调用 createPattern 函数 ， 即 调用 


createPattern 图 数 来 蔡 代 先前 的 drawlmage 函数 。 函 数 createPattern 的 语法 格式 如 下 : 





createPattern (image, type) 
其 中 image 表示 要 绘制 的 图 像 。type 表示 平 铺 的 类 型 ， 其 具体 含义 如 表 11-8 所 示 。 
表 11-8 type 表示 平 铺 的 类 型 











参数 值 说 明 
no-repeat 不 平 铺 
Tepeat-x 横 方 向 平 铺 
repeat-y 纵 方向 平 铺 
Tepeat 全 方向 平 铺 


【 例 11.13】 平 铺 图 像 (案例 文件 : ch11\11.13.html)。 


<!DOCTYPE html> 
<html> 
<head> 
<title> 绘 制图 像 平 铺 </title> 
</head> 
<body onload="draw('canvas');"> 
<h1> 图 形 平 铺 </h1> 
<canvas id="canvas" width="800" height="600"></canvas> 
<script> 
function draw (id) { 
var canvas = document.getElementById (id); 
if (canvas==null) { 
return false; 
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} 
var context = canvas.getContext ('2d"'); 
context.fillStyle = "#eeeeff"; 
context.fillRect (0,0,800,600); 
image = new Image(); 
image.srce = "02.jpg"; 
image-.onload = function() { 
var ptrn = context.createPattern (image, 'repeat'); 
context.fillStyle = ptrn; 
context.fillRect (0,0,800,600); 
} 
$ 
</script> 
</body> 
</html> 


在 上 述 代码 中 ， 用 fillRect 创建 了 一 个 宽度 为 800、 高 度 为 600， 左 上 角 坐 标 位 置 为 (0.0) 
的 矩形 ， 然 后 创建 了 一 个 Image 对 象 ，src 表示 链接 一 个 图 像 源 ， 然 后 使 用 createPattern 绘制 
一 个 图 像 ， 其 方式 是 完全 平 铺 ， 并 将 这 个 图 像 作为 一 个 模式 填充 到 和 矩形 中 。 最 后 绘制 这 个 和 矩 
形 ， 此 矩形 的 大 小 完全 有 覆盖 原来 的 图 形 。 

在 TE 11.0 中 浏览 ， 效 果 如 图 11-13 所 示 。 可 以 看 到 ， 页 面 上 绘制 了 一 个 图 像 ， 其 图 像 以 
平 铺 的 方式 充满 整个 矩形 。 




















11-13 图像 平 铺 
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11.5.3 “案例 14 一 一 裁剪 图 像 


要 完成 对 图 像 的 裁剪 ， 需 要 用 到 clip WE. clip 方法 表示 给 canvas 设置 一 个 剪辑 区 域 。 


在 调用 clip 方法 之 后 ， 所 有 代码 只 对 这 个 设 定 的 剪辑 区 域 有 效 ， 不 会 影响 其 他 地 方 。 这 个 方 
法 在 要 进行 局 部 更 新 时 很 有 用 。 在 默认 情况 下 ， 和 剪辑 区 域 是 一 个 左上 角 在 (0.0)， 宽 和 高 分 别 
等 于 canvas 元 素 的 宽 和 高 的 和 矩形 。 


【 例 11.14】 裁 前 图 像 (案例 文件 : ch11\11.14.html). 


<!DOCTYPE html> 

<html> 

<head> 
<title> 绘 制图 像 裁剪 </title> 


<script type="text/javascript" src="script.js"></script> 


</head> 

<body onload="draw('canvas');"> 
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<canvas id="canvas" width="400" height="300"></canvas> 
<script> 


function draw (id) { 
var canvas = document.getElementBylId (id); 
if (canvas==null) { 
return false; 
} 
var context = canvas.getContext ('2d"'); 
var gr = context.createLinearGradient (0, 400,300,0); 
gr.addColorStop (0, 'rgb(255,255,0)'); 
gr.addColorStop (1, 'rgb(0,255,255)'); 
context.fillStyle = gr; 
context.fillRect (0,0,400, 300); 
image = new Image(); 
image .onload=function () { 
drawImg (context, image); 
}; 
image.src = "02.jpg"; 
Ui 
function drawImg (context, image) { 
create8StarClip (context) ; 
context .drawImage (image, -50,-150, 300, 300); 
} 
function create8StarClip (context) { 
var n = 0; 
var dx 100; 
var dy 0; 
var s = 150; 
context .beginPath (); 
context.translate (100,150); 
var x = Math.sin(0); 
var y = Math.cos (0); 
var dig = Math.PI/5*4; 
for (var He EA e E aa E i 
var x Math.sin (i*dig); 
var y = Math.cos(i*dig); 
context .lineTo (dx+x*s,dy+y*s); 





} 
context.clip(); 
} 
</script> 
</body> 
</html> 


在 上 述 代 码 中 ， 创 建 了 3 个 JavaScript 函数 ， 其 中 create8StarClip 函数 完成 了 多 边 的 图 形 
创建 ， 以 此 图 形 作为 裁剪 的 依据 。drawImg 函数 表示 绘制 一 个 图 形 ， 其 图 形 带 有 裁剪 区 域 。 
draw 函数 完成 对 画布 对 象 的 获取 ， 并 定义 一 个 线性 渐变 ， 然 后 创建 了 一 个 Image 对 象 。 

在 正 11.0 中 浏览 ， 效 果 如 图 11-14 所 示 。 可 以 看 到 ， 页 面 上 绘制 了 一 个 五 边 形 ， 图 像 作 
为 五 边 形 的 背景 显示 ， 从 而 实现 了 对 图 像 的 裁剪。 
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图 11-14 图 像 栽 剪 
11.5.4 ”案例 15 一 一 图 像 的 像素 化 处 理 


在 画布 中 ， 可 以 使 用 ImageData 对 象 来 保存 图 像 的 像素 值 ， 它 有 width、height 和 data 这 
3 个 属性 ， 其 中 data 属性 就 是 一 个 连续 数组 。 图 像 的 所 有 像素 值 其 实 是 保存 在 data 里 面 的 。 
data 属性 保存 像素 值 的 方法 如 下 : 


imageData.data[index*4+0] 
imageData.data[index*4+1] 
imageData.data[index*4+2] 
imageData. data [index*4+3] 


上 面 取出 了 data 数组 中 连续 相 邻 的 4 个 值 ， 这 4 个 值 分 别 代 表 了 图 像 中 第 index+1 “MR 
素 的 红色 、 绿 色 、 蓝 色 和 透明 度 值 的 大 小 。 需 要 注意 的 是 ，index 从 0 开始 ， 图 像 中 总 共有 
width*height 个 像素 ， 数 组 中 总 共 保 存 了 width*height*4 个 数值 。 

画布 对 象 有 3 个 方法 ， 用 来 创建 、 读 取 和 设置 InageData 对 象 ， 如 表 11-9 所 示 。 

表 11-9 创建 画布 对 象 的 方法 
说 AA 
在 内 存 中 创建 一 个 指定 大 小 的 ImageData 对 象 ( 即 像素 数组 )， 对 象 中 
的 像素 点 都 是 黑色 透明 的 ， 即 rgba(0.0.0.0) 
返回 一 个 ImageData 对 象 ， 这 个 ImageData 对 象 中 包含 了 指定 区 域 的 
像素 数组 
将 ImageData 对 象 绘制 到 屏幕 的 指定 区 域 上 
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方 法 





createImageData(width, height) 





getImageData(x, y, width, height) 








utImageData(data, x, 
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【 例 11.15】 图 像 的 像素 化 处 理 (案例 文件 : ch11\11.15.html). 


<!DOCTYPE html> 
<html> 
<head> 
<title> 图 像 像素 处 理 </title> 


<script type="text/javascript" src="script.js"></script> 


</head> 

<body onload="draw('canvas');"> 

<h1> 像 素 处 理 示例 </h1> 

<canvas id="canvas" width="400" height="300"></canvas> 
<script> 


function draw(id) { 
var canvas = document.getElementById (id); 
if (canvas==null) { 
return false; 





} 
var context = canvas.getContext ('2d'); 
image = new Image(); 
image.sre = "01.jpg"; 
image .onload=function () { 
context .drawImage (image, 0,0); 
var imagedata = context.getImageData (0,0, image.width, image.height) ; 
for(var i=0,n=imagedata.data.length; i<n; it=4) { 
imagedata.data[i+0] 255-imagedata.data[i+0]; 
imagedata.data[i+1] 255-imagedata.data[i+2]; 
imagedata.data[i+2] 255-imagedata.data[i+1]; 


} 
context .putImageData (imagedata, 0,0); 


Me 

} 

</script> 

</body> 

</html> 

在 上 述 代 码 中 ， 使 用 getImageData() 方 法 获取 一 个 ImageData 对 象 ， 并 包含 相关 的 像素 数 
组 。 在 for 循环 中 ， 对 像素 值 重 新 赋值 ， 最 后 使 用 putImageData 将 处 理 过 的 图 像 在 画布 上 绘 
制 出 来 。 

在 TE 11.0 中 浏览 ， 效 果 如 图 11-15 所 示 。 可 以 看 到 ， 页 面 上 显示 了 一 个 图 像 ， 其 图 像 明 


显 经 过 像素 处 理 ， 显 示 得 没有 原来 清晰 。 
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图 11-15 像素 处 理 


11.6 案例 16 一 一 绘制 文字 


在 画布 中 绘制 字符 串 (文字 ) 的 方式 ， 与 操作 其 他 路 径 对 象 的 方式 相同 ， 可 以 描绘 文本 轮廓 
和 填充 文本 内 部 ， 同 时 ， 所 有 能 够 应 用 于 其 他 图 形 的 变换 和 样式 都 能 用 于 文本 。 
文本 绘制 功能 涉及 的 方法 如 表 11-10 所 示 。 


表 11-10 ”绘制 文本 的 方法 
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方 法 说 明 
绘制 带 fillstyle 填充 的 文字 ， 拥 有 文本 参数 以 及 用 于 指定 文本 位 置 的 坐标 
fillText(text,x,y,maxwidth) 的 参数 。maxwidth 是 可 选 参数 ， 用 于 限制 字体 大 小 ， 它 会 将 文本 字体 强制 


收缩 到 指定 尺寸 

绘制 只 有 strokeStyle 边框 的 文字 ， 其 参数 含义 与 上 一 个 方法 相同 

该 函数 会 返回 一 个 度量 对 象 ， 它 包含 了 在 当前 context 环境 下 指定 文本 的 
实际 显示 宽度 


为 了 保证 文本 在 各 浏览 器 中 都 能 正常 显示 ， 在 绘制 上 下 文 里 有 以 下 字体 属性 。 

(1) font。 可 以 是 CSS 字体 规则 中 的 任何 值 。 包 括 字体 样式 、 字 体 变种 、 字 体 大 小 与 粗 
细 、 行 高 和 字体 名 称 。 

(2) textAlign。 控 制 文本 的 对 齐 方式 。 它 类 似 于 (但 不 完全 等 同 于 )CSS 中 的 text-align. A 
能 的 取 值 为 start、end、left、right 和 center. 

(3) textBaseline 。 控 制 文本 相对 于 起 点 的 位 置 。 可 以 取 值 为 top、hanging、middle、 
alphabetic, ideographic 和 bottom。 对 于 简单 的 英文 字母 ， 可 以 放心 地 使 用 top. middle 或 
bottom 作为 文本 基线 。 

【 例 11.16) 绘制 文字 (案例 文件 : chll\11.16.htmD。 


<!DOCTYPE html> 
<html> 
<head> 
<title>Canvas</title> 
</head> 
<body> 
<canvas id="my canvas" width="200" height="200" 
style="border:lpx solid #ff0000"> 
</canvas> 
<script type="text/javascript"> 
var elem = document .getElementById ("my_canvas"); 
if (elem && elem.getContext) { 
var context = elem.getContext ("2d"); 
context.fillStyle = '#00f'; 
//font: 文字 字体 ， 同 cssfont-family 属性 
context.font = ‘italic 30px 微软 雅 黑 '; // 和 斜体 30 像素 ， 微 软 雅 黑 字体 
//textAlign: 文字 水 平 对 齐 方式 。 
// 可 取 属 性 值 : start，end，1left，right，center。 默 认 值 :start 
context.textAlign = 'left'; 





trokeText(text.x.y,maxwidth) 


measureText 
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// 文 字 竖 直 对 齐 方式 。 
// 可 取 属 性 值 : top, hanging, middle, alphabetic, ideographic, bottom 
// 默 认 值 : alphabetic 
context.textBaseline = 'top 
// 要 输出 的 文字 内 容 ， errr 第 4 个 参数 为 可 选 选项 一 一 最 大 宽度 。 
// 如 果 需 要 的 话 ， 浏 览 器 会 缩减 文字 ， 以 让 它 适应 指定 宽度 
context.fillText ("EARA!", 0, 0,50); // 有 填充 
context.font = 'bold 30px sans-serif'; 
context.strokeText ("EARAH!', 0, 50,100); // 只 有 文字 边框 

} 

</script> 

</body> 

</html> 


在 正 11.0 中 浏览 ， 效 果 如 图 11-16 所 示 。 可 以 看 到 ， 页 面 上 显示 了 一 个 画布 边框 ， 画 布 
中 显示 了 两 个 不 同 的 字符 串 。 第 一 个 字符 串 以 斜体 显示 ， 其 颜色 为 蓝 色 。 第 二 个 字符 串 字 体 
颜色 为 浅 黑 色 ， 加 粗 显 示 。 
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图 11-16 绘制 文字 
11.7 ”图 形 的 保存 与 恢复 


在 画布 对 象 中 绘制 图 形 或 图 像 时 ， 可 以 将 这 些 图 形 或 者 图 形 的 状态 进行 保存 ， 即 永久 保 
存 图 形 或 图 像 。 


11.7.1 案例 17 一 一 保存 与 恢复 状态 


在 画布 对 象 中 ， 由 两 个 方法 管理 绘制 状态 的 当前 栈 ，save 方法 把 当前 状态 压 入 栈 中 ， 而 
restore 方法 从 栈 项 弹出 状态 。 绘 制 状态 不 会 覆盖 对 画布 所 做 的 每 件 事情 。 其 中 save 方法 用 来 
保存 canvas 的 状态 。save 之 后 ， 可 以 调用 canvas 的 平移 、 缩 放 、 旋 转 、 错 切 、 裁 剪 等 操作 。 
restore 方法 用 来 恢复 canvas 先前 保存 的 状态 ， 防 止 save 后 对 canvas 执行 的 操作 对 后 续 的 绘制 
有 影响 。save 和 restore 要 配对 使 用 (restore 可 以 比 save 少 ， 但 不 能 多 )， 如 果 restore 调用 次 数 


LK save 多 ， 会 引发 Error。 


【 例 11.17】 保 存 与 恢复 状态 (案例 文件 : chll\11.17.htmD。 


<!DOCTYPE html> 
<html> 


<head><title> 保 存 与 恢复 </title></head> 


<body> 


<canvas id="myCanvas" width="500" height="400" 


style="border:lpx solid blue"> 


Your browser does not support the canvas element. 


</canvas> 
<script type="text/javascript"> 


var c = document.getElementById("myCanvas") ; 


var ctx = c.getContext ("2d"); 

ctx.fillsStyle = "rgb(0,0,255)"; 

ctx.save(); 

ctx.fillRect (50,50,100,100); 

ctx.fillstyle = "rgb(255,0,0)"; 

ctx.save(); 

ctx. fillRect (200,50,100,100); 

ctx.restore(); 

ctx. fillRect (350,50,100,100); 

ctx.restore(); 

ctx.fillRect(50, 200, 100, 100); 

</script> 

</body> 

</html> 

在 上 述 代码 中 ， 绘 制 了 4 个 矩形 ， 在 第 
1 个 矩形 绘制 之 前 ， 定 义 当 前 矩形 的 显示 颜 
色 ， 并 将 此 样式 加 入 到 栈 中 ， 然 后 创建 了 一 
个 矩形 。 在 第 2 个 矩形 绘制 之 前 ， 重 新 定义 
TTB SARE, HEH save 将 此 样式 压 
入 到 栈 中 ， 然 后 创建 了 一 个 矩形 。 在 第 3 个 
FEB ZH, (EAL restore 恢复 当前 显示 
颜色 ， 即 调用 栈 中 的 最 上 层 颜 色 ， 绘 制 矩 
形 。 在 第 4 个 矩形 绘制 之 前 ， 继 续 使 用 
restore 方法 ， 调 用 最 后 一 个 栈 中 的 元 素来 定 
SUT RE. 

在 TE 11.0 中 浏览 ， 效 果 如 图 11-17 所 
示 。 可 以 看 到 ， 页 面 上 绘制 了 4 MEW, B 
1 个 和 第 4 个 矩形 显示 为 蓝 色 ， 第 2 个 和 第 
3 个 矩形 显示 为 红色 。 


11.7.2 ”案例 18 一 一 保存 文件 
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11-17 ”保存 与 恢复 


当 绘 制 出 漂亮 的 图 形 时 ， 有 时 需要 保存 这 些 劳 动 成 果 。 这 时 可 以 将 当前 的 画布 元 素 (而 不 


e 
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是 2D 环境 ) 的 当前 状态 导出 到 数据 URL。 导 出 很 简单 ， 可 以 利用 toDataURL 方法 来 完成 ， 它 
可 以 调用 不 同 的 图 片 格式 。 目 前 Firefox 和 Opera 浏览 器 只 支持 PNG 格式 ，Safari 支持 GIF. 
PNG 和 JPG 格式 。 大 多 数 浏 览 器 支持 读 取 base64 编码 内 容 ， 如 一 幅 图 像 。URL 的 语法 格式 
如 下 : 

data:image/png;base64, iVBORWwOKGgoAAAANSUhEUgAAAfQAAAHOCAYAAADL]1t 


它 以 一 个 data 开始 ， 然 后 是 mine 类 型 ， 之 后 是 编码 和 base64， 最 后 是 原始 数据 。 这 些 原 
始 数 据 就 是 画布 元 素 所 要 导出 的 内 容 ， 并 且 浏 览 器 能 够 将 数据 编码 为 真正 的 资源 。 
【 例 11.18】 保 存 文件 (案例 文件 : chll\11.18.html)。 


<!DOCTYPE html> 
<html> 
<body> 
<canvas id="myCanvas" width="500" height="500" 
style="border:lpx solid blue"> 
Your browser does not support the canvas element. 
</canvas> 
<script type="text/javascript"> 
var c = document .getElementById ("myCanvas"); 
var cxt = c.getContext ("2d"); 
cxt.fillStyle = 'rgb(0,0,255)'; 
cxt.fillRect (0,0,cxt.canvas.width, cxt.canvas.height); 
cxt.fillStyle = "rgb(0,255,0)"; 
cxt.fillRect (10,20,50,50); 
window.location = cxt.canvas .toDataURL ('image/png'); 
</script> 
</body> 
</html> 


在 上 述 代 码 中 ， 使 用 canvas.toDataURL 语句 将 当前 绘制 图 像 保存 到 URL 数据 中 。 在 
Firefox 53.0 中 浏览 ， 效 果 如 图 11-18 所 示 。 可 以 看 到 ， 在 浏览 器 的 地 址 栏 中 显示 的 是 URL 
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11.8 ”综合 案例 一 一 绘制 火柴 棒 人 物 


漫画 中 最 常见 的 一 种 图 形 ， 就 是 火柴 棒 人 ， 通 过 简单 的 几 个 笔画 ， 就 可 以 绘制 出 一 个 传 
神 的 动漫 人 物 。 使 用 canvas 和 JavaScript 同样 可 以 绘制 一 个 火柴 棒 人 物 。 有 具体 操作 步骤 如 下 。 

ETID 分 析 需 求 。 

一 个 火柴 棒 人 ， 由 两 个 部 分 组 成 : 脸 部 和 身躯 。 脸 部 是 一 个 圆 形 ， 其 中 包括 眼睛 和 嘴 ， 
身躯 由 几 条 直线 组 成 ， 包 括 有 骆 膊 和 腿 等 。 实 际 上 此 案例 就 是 绘制 圆 形 、 弧 度 和 直线 的 组 合 。 
示例 完成 后 ， 效 果 如 图 11-19 所 示 。 

Ee 实现 HTML 页面， 定义 画布 canvas: 

<!DOCTYPE html> 

<html> 

<title> 绘 制 火柴 棒 人 </title> 

<body> 

<canvas id="myCanvas" width="500" height="300" 


style="border:lpx solid blue"> 
Your browser does not support the canvas element. 
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</canvas> 
</body> 
</html> 
76 TE 11.0 中 浏览 ， 效 果 如 图 11-20 所 示 ， 页 面 中 显示 了 一 个 画布 边框 。 
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图 11-19 火柴 棒 人 11-20 ”定义 画布 边框 

实现 头 部 轮廓 绘制 : 


<script type="text/javascript"> 

var c = document.getElementById("myCanvas") ; 
var cxt = c.getContext ("2d"); 
cxt.beginPath (); 

cxt.arc (100,50, 30,0,Math.PI*2,true); 

cxt .fill(); 

</script> 


这 会 产生 一 个 实心 的 、 填 充 的 头 部 ， 即 圆 形 。 在 are 函数 中 ，x 和 y 的 坐标 为 (100,50)， 
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半径 为 30 像素 ， 另 两 个 参数 为 弧度 的 开始 和 结束 ， 第 6 个 参数 表示 绘制 弧 形 的 方向 ， 即 顺 时 


fey HTML 5 网 页 设计 
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针 和 逆 时 针 方 向 。 
在 正 11.0 中 浏览 ， 效 果 如 图 11-21 所 示 ， 页 面 中 显示 了 实心 圆 ， 其 颜色 为 黑色 。 
GED 用 JS 绘制 笑脸 : 
cxt.beginPath(); 


cxt. 
cxt. 
cxt. 
cxt. 


此 处 使 用 beginPath 方法 ， 表 示 重 新 绘制 ， 并 设 定 线条 宽度 ， 然 后 绘制 了 一 个 弧 形 ， 这 个 


strokeStyle = '#c00'; 

lineWidth = 3; 
arc(100,50,20,0,Math.PI, false); 
stroke (); 


弧 形 是 从 嘴 部 开始 的 弧 形 。 
在 正 11.0 中 浏览 ， 效 果 如 图 11-22 所 示 ， 页 面 中 显示 了 一 个 漂亮 的 半圆 式 的 笑脸 。 
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图 11-21 绘制 头 部 轮廓 


step 05 绘制 眼睛 : 


cxt. 
.fillStyle = "#c00"; 
cxt. 
FERERHFI 
cxt. 
cxt. 
cxt. 


cxt 


cxt 


cxt 


beginPath (); 
arc (90,45,3,0,Math.PI*2,true) ; 
moveTo (113,45); 


arc(110,45,3,0,Math.PI*2,true) ; 
£111(); 


.stroke(); 


首先 填充 弧 线 ， 创 建 了 一 个 实体 样式 的 眼睛 ，arc 绘制 左 眼 ， 然 后 使 用 moveTo 绘制 右 


图 11-22 ”绘制 笑脸 


在 正 11.0 中 浏览 ， 效 果 如 图 11-23 所 示 ， 页 面 中 显示 了 一 双 了 眼睛 。 
ETD 绘制 身躯: 


ext. 
cxt. 
.moveTo (100,100), 
.lineTo (60,120); 
cxt. 
.lineTo (140,120); 


cxt 
CRE 


cxt 


moveTo (100,80); 
lineTo (100,150); 


moveTo (100,100); 





cxt.moveTo (100,150); 

cxt-lineTo (80,190); 

cxt.moveTo (100,150); 

cext.lineTo (140,190); 

cxt.stroke(); 

上 述 代 码 以 moveTo 作为 开始 坐标 ， 以 lineTo 为 终点 ， 绘 制 不 同 的 直线 ， 这 些 直 线 的 坐 
标 位 置 需要 在 不 同 地 方 汇集 ， 两 只 手 在 坐标 位 置 (100,100) 处 交叉 ， 两 只 脚 在 坐标 位 置 (100,.150) 
处 交叉 。 

在 正 11.0 中 浏览 ， 效 果 如 图 11-24 所 示 ， 页 面 中 显示 了 一 个 火柴 棒 人 ， 与 上 一 个 图 形 相 
比 ， 多 了 一 个 身躯。 


BBN 9 JNLH EA HLL HE a 
































=. ax - Oo x 
i [E c\users\adminetronDediaop uk O = © || 人 es 人 x e | 司 ceersedrinarer P ~ C| S mA 
[ANA MBO SEM GWRW IRAM PRH SH WEE) EEV) SBAA IAT SDH 
Æ 11-23 ”绘制 眼睛 E 11-24 绘制 身躯 


11.9” 跟 我 学 上 机 一 一 绘制 商标 


绘制 商标 是 canvas 画布 的 用 途 之 一 ， 可 以 绘制 adidas 和 nike 商标 。nike 的 图 标 比 adidas 
的 复杂 得 多 ，adidas 都 是 直线 组 成 ， 而 nike 的 多 了 曲线 。 实 现 本 例 的 具体 操作 步骤 如 下 。 

要 绘制 两 条 曲线 ， 需 要 找到 曲线 的 参考 点 (参考 点 决定 了 曲线 的 曲率 )， 这 需要 慢 慢 地 移 
动 ， 然 后 再 看 效果 ， 反 反复 复 。quadraticCurveTo(30,79,99,78) 函 数 有 两 组 坐标 : 第 一 组 坐标 为 
控制 点 ， 决 定 曲线 的 曲率 ， 第 二 组 坐标 为 终点 。 

构建 HIML， 实 现 canvas 画布 : 

<!DOCTYPE html> 

<html> 

<head> 

<title> 绘 制 商标 </title> 

</head> 

<body> 

<canvas id="nike" width="375px" height="132px" 

style="border:lpx solid #000;"> 
</canvas> 
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</body> 

</html> 

在 下 11.0 中 浏览 ， 效 果 如 图 11-25 所 示 ， 页 面 中 只 显示 了 一 个 画布 边框 ， 其 内 容 还 没有 
绘制 。 
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11-25 ”定义 画布 边框 
用 JS 实现 基本 图 形 : 


<script> 

function drawNike() { 
// 取 得 canvas 元 素 及 其 绘图 上 下 文 
var canvas = document .getElementById('Nike'); 
var context = canvas.getContext ('2d"'); 
// 保 存 当前 的 绘图 状态 
context.save(); 
// 开 始 绘制 打 钧 的 轮廓 
context.beginPath (); 
context .moveTo (53,0); 
// 绘 制 上 半 部 分 曲线 ， 第 一 组 坐标 为 控制 点 ， 决 定 曲线 的 曲率 ， 第 二 组 坐标 为 终点 
context .quadraticCurveTo (30,79, 99,78); 
context. lineTo (371, 2); 
context. lineTo (74,134); 
context .quadraticCurveTo (-55,124,53,0); 
// 用 红色 填充 
context.fillStyle = "#da251c"; 
context.fill(); 


// 用 3 像素 深 红线 条 描 边 
context.lineWidth = 3; 

// 连 接 处 平滑 
context.lineJoin = 'round'; 


context.strokeStyle = "#d40000"; 

context . stroke () 7 

// 恢 复原 有 的 绘图 状态 

context.restore(); 
li 
window.addEventListener ("load", drawNike, true); 
</script> 


在 正 11.0 中 浏览 ， 效 果 如 图 11-26 所 示 ， 显 示 了 一 个 商标 图 案 ， 颜 色 为 红色 。 
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图 11-26 绘制 商标 
11.10 高 手 解 惑 


疑问 1: canvas 的 宽度 和 高 度 是 否 可 以 在 CSS 属性 中 定义 呢 ? 

答 : 添加 canvas 标签 的 时 候 ， 会 在 canvas 的 属性 里 填写 要 初始 化 的 canvas 的 高 度 和 
宽度 : 

<canvas width="500" height="400">Not Supported!</canvas> 

如 果 把 高 度 和 宽度 写 在 了 CSS 里 面 ， 结 果 会 发 现 ， 在 绘图 时 坐标 获取 出 现 差异 ， 
canvas.width 和 canvas.height 分 别 是 300 和 150， 与 预期 的 不 一 样 。 这 是 因为 canvas 要 求 这 两 
个 属性 必须 随 canvas 标记 一 起 出 现 。 

疑问 2: 画布 中 Stroke 和 Fill 二 者 的 区 别 是 什么 ? 

Æ: HIML 5 中 ， 将 图 形 分 为 两 大 类 : 第 一 类 称 作 Stroke， 就 是 轮廓 、 勾 勒 或 者 线条 ， 总 


之 ， 图 形 是 由 线条 组 成 的 ， 第 二 类 称 作 Fill， 就 是 填充 区 域 。 上 下 文 对 象 中 有 两 个 绘制 矩形 的 
方法 ， 可 以 让 我 们 很 好 地 理解 这 两 大 类 图 形 的 区 别 : 一 是 strokeRect; 二 是 fillRect。 
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第 12 章 
HTML 5 中 的 
文件 与 拖 放 


在 HTML 5 中 ， 专 门 提 供 了 一 个 页 面 层 调 用 的 API 文件 ， 通 过 调用 这 个 API 
文件 中 的 对 象 、 方 法 和 接口 ， 可 以 很 方便 地 访问 文件 的 属性 或 读 取 文 件 内 容 。 另 
外 ， 在 HTML 5 中 ， 还 可 以 将 文件 进行 拖 放 ， 即 抓 取 对 象 以 后 拖 到 另 一 个 位 置 。 任 
何 元 素 都 能 够 被 拖 放 ， 常 见 的 拖 放 元 素 为 图 片 、 文 字 等 。 


重点 案例 效果 
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12.1 选择 文件 


在 HTML 5 中 ， 可 以 创建 一 个 file 类 型 的 <input> 元 素 实现 文件 的 上 传 功能 。 只 是 在 
HTML 5 中 ， 该 类 型 的 <input> 元 素 新 添加 了 一 个 multiple 属性 ， 如 果 将 属性 的 值 设置 为 tue， 
则 可 以 在 一 个 元 素 中 实现 多 个 文件 的 上 传 。 


12.1.1 案例 1 一 一 选择 单个 文件 


在 HTML 5 中 ， 当 需要 创建 一 个 file 类 型 的 <input> 元 素 上 传 文件 时 ， 可 以 定义 只 选择 一 
个 文件 。 
【 例 12.1】 通 过 file 对 象 选择 单个 文件 (案例 文件 : ch12\12.1.html). 


<!DOCTYPE html> 

<html> 

<head> 

<title> 文 件 </title> 

</head> 

<body> 
<form> 
<h3> 请 选择 文件 : </h3> 
</p><input type="file" id="fileload" /></p><!- 单 个 文件 进行 上 传 --> 
</form> 

</body> 

</html> 


在 IE 11.0 中 预览 ， 效 果 如 图 12-1 所 示 ， 在 其 中 单 击 “ 浏 览 ”按钮 ， 打 开 “ 选 择 要 加 载 
的 文件 ”对 话 框 ， 在 其 中 只 能 选择 一 个 要 加 载 的 文件 ， 如 图 12-2 所 示 。 
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12-1 预览 效果 图 12-2 只 能 选择 一 个 要 加 载 的 文件 


12.1.2 ”案例 2 一 一 选择 多 个 文件 


在 HIML 5 中 ， 除 了 可 以 选择 单个 文件 外 ， 还 可 以 通过 添加 元 素 的 multiple 属性 ， 实 现 
选择 多 个 文件 的 功能 。 
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【 例 12.2】 通 过 file 对 象 选择 多 个 文件 (案例 文件 : ch12\12.2._btml). 


<!DOCTYPE HTML> 

<html> 

<body> 

<form> 

选择 文件 : <input type="file" multiple="multiple”" /> 
</form> 

<p> 在 浏览 文件 时 可 以 选取 多 个 文件 。</p> 

</body> 

</html> 


在 TE 11.0 中 预览 ， 效 果 如 图 12-3 所 示 ， 在 其 中 单 击 “ 浏 览 ”按钮 ， 打 开 “ 选 择 要 加 载 
的 文件 ”对 话 框 ， 在 其 中 可 以 选择 多 个 要 加 载 的 文件 ， 如 图 12-4 所 示 。 
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- o x 
E) C\Users\adminstror\ O ~ È @ CUsers\adminstror... 
ZEHA RRO SEV KERA) IAM WAH) 
选择 文件 ， WA... 


在 浏览 文件 时 可 以 选取 多 个 文件 。 











图 12-3 ”预览 效果 图 12-4 可 以 选择 多 个 要 加 载 的 文件 





12.2 ”使 用 FileReader 接口 读 取 文 件 


使 用 Blob 接口 可 以 获取 文件 的 相关 信息 ， 如 文件 名 称 、 大 小 、 类 型 ， 但 如 果 想 要 读 取 或 
浏览 文件 ， 则 需要 通过 FileReader 接口 。 该 接口 不 仅 可 以 读 取 图 片 文 件 ， 还 可 以 读 取 文 本 或 
二 进 制 文件 ， 同 时 ， 根 据 该 接口 提供 的 事件 与 方法 ， 可 以 动态 侦察 文件 读 取 时 的 详细 状态 。 


12.2.1 检测 浏览 器 是 否 支持 FileReader 接口 


FileReader 接口 主要 用 来 把 文件 读 入 到 内 存 ， 并 且 读 取 文 件 中 的 数据 。FileReader 接口 提 
供 了 一 个 异步 API， 使 用 该 API 可 以 在 浏览 器 主线 程 中 异步 访问 文件 系统 ， 读 取 文 件 中 的 数 
据 。 到 目前 为 止 ， 并 不 是 所 有 浏览 器 都 实现 了 FileReader 接口 。 这 里 提供 一 种 方法 可 以 检查 
您 的 浏览 器 是 否 对 FileReader 接口 提供 支持 。 有 具体 的 代码 如 下 : 


if (typeof FileReader == 'undefined'){ 
result.InnerHTML="<p> 你 的 浏览 器 不 支持 FileReader 接口 ! </p>"; 
// 使 选择 控件 不 可 操作 


file.setAttribute ("disabled", "disabled") ; 
} 
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12.2.2 FileReader 接口 的 方法 


FileReader 接口 有 4 个 方法 ， 其 中 3 个 用 来 读 取 文件 ， 另 外 1 个 用 来 中 断 读 取 。 无 论 读 取 
成 功 或 失败 ， 方 法 并 不 会 返回 读 取 结果 ， 这 一 结果 存储 在 result 属性 中 。FileReader 接口 的 方 
法 及 其 描述 如 表 12-1 所 示 。 


表 12-1 FileReader 接口 的 方法 及 其 描述 


方法 名 PE 


, . 将 文件 以 文本 方式 读 取 ， 读 取 的 结果 即 是 这 个 文本 文 
readAsText File, [encoding] 件 中 的 内 容 


PR a 这 个 方法 将 文件 读 取 为 二 进 制 字符 串 ， 通 常 我 们 将 它 
ee 送 到 后 端 ， 后 端 可 以 通过 这 段 字符 串 存储 文件 


该 方法 将 文件 读 取 为 一 串 Data Url 字符 串 ， 该 方法 事 
实 上 是 将 小 文件 以 一 种 特殊 格式 的 URL 地 址 形式 直接 





nt 读 入 页 面 。 这 里 的 小 文件 通常 是 指 图 像 与 hml 等 格式 
的 文件 
abort 终端 读 取 操作 





12.2.3 ”案例 3 一 一 使 用 readAsDataURL 方法 预览 图 片 


通过 fileReader 接口 中 的 readAsDataURL0O 方 法 ， 可 以 获取 API 异步 读 取 的 文件 数据 ， 另 
存 为 数据 URL， 将 该 URL 绑 定 <img> 元 素 的 sre 属性 值 ， 就 可 以 实现 图 片 文件 预览 的 效果 。 
如 果 读 取 的 不 是 图 片 文件 ， 将 给 出 相应 的 提示 信息 。 

【 例 12.3】 使 用 readAsDataURL 方法 预览 图 片 (案例 文件 :ch12\12.3.html)。 


<!DOCTYPE html> 


<html> 

<head> 

<title> 使 用 readAsDataURL 方法 预览 图 片 </title> 
</head> 

<body> 


<script type="text/javascript"> 
var result=document.getElementById ("result"); 
var file=document.getElementById ("file"); 


// 判 断 浏览 器 是 否 支持 FileReader 接口 


if (typeof FileReader == 'undefined'){ 
result.InnerHTML="<p> 你 的 浏览 器 不 支持 FileReader 接口 ! </p>"; 
// 使 选择 控件 不 可 操作 


file.setAttribute ("disabled", "disabled") ; 
i} 


function readAsDataURL () { 
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// 检 验 是 否 为 图 像 文件 

var file = document.getElementBYId("file") .files[0]; = 
if(!/image\/\w+/.test (file.type)) { 

alert (" 这 个 不 是 图 片 文 件 ， 请 重新 选择 ! ") ; = 

return false; = 

= 

} a 

var reader = new FileReader(); 中 

// 将 文件 以 Data URL 形式 读 入 页 面 的 

reader.readAsDataURL (file); 在 

reader.onload=function(e){ 4 

var result=document .getElementById ("result"); 拖 

// 显 示 文 件 放 


result.innerHTML='<img src="' + this.result +'" alt="" />'; 






} 
} x 
</script> AS 
<p> 
<label1> 请 选择 一 个 文件 : </label> N 
<input type="file" id="file" /> 
<input type="button" value=" 读 取 图 像 " onclick="readAsDataURL()" /> > 
</p> 
<div id="result" name="result"></div> 
</body> 
</html> 


在 IE 11.0 中 预览 ， 效 果 如 图 12-5 所 示 。 在 页 面 中 单 击 “ 浏 览 ” 按 钮 ， 打 开 “ 选 择 要 加 
载 的 文件 ”对 话 框 ， 在 其 中 选择 需要 预览 的 图 片 文 件 ， 如 图 12-6 所 示 。 
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12-5 ”预览 效果 12-6 “选择 要 加 载 的 文件 ”对 话 框 


选择 完毕 后 ， 在 “选择 要 加 载 的 文件 ”对 话 框 中 单 击 “打开 ”按钮 ， 返 回 到 TE 11.0 中 ， 
然后 单 击 “ 读 取 图 像 ” 按 钮 ， 即 可 在 页 面 的 下 方 显 示 添 加 的 图 片 ， 如 图 12-7 所 示 。 

如 果 在 “选择 要 加 载 的 文件 ”对 话 框 中 选择 的 不 是 图 片 文件 ， 当 在 TE 11.0 中 单 击 “ 读 取 
图 像 ”按钮 后 ， 就 会 给 出 相应 的 提示 信息 ， 如 图 12-8 所 示 。 





fey HTML 5 网 页 设计 
案例 课堂 (第 2 版 ) D~- 





- o x 
@ E) CAUsers\adminstron O ~ È || @ 使 用 eadAsDataURL_ x 
ZA REE) EEV KERA IAM SAH 








请 选择 一 个 文件 。 C isersiadninstror D WAL. | [RRR 














来 自 网 页 的 消息 x 


l 这 个 不 是 图 片 文件 ,请 重新 选择 ! 











图 12-7 显示 图 片 图 12-8 信息 提示 框 








12.2.4 案例 4 一 一 使 用 readAsText 方法 读 取 文 本 文件 


使 用 FileReader 接口 中 的 readAsTextO 方法 ， 可 以 将 文件 以 文本 编码 的 方式 进行 读 取 ， 
即 可 以 读 取 上 传 文本 文件 的 内 容 ， 其 实现 的 方法 与 读 取 图 片 基 本 相似 ， 只 是 读 取 文 件 的 方式 
不 一 样 。 

【 例 12.4】 使 用 readAsText 方法 读 取 文本 文件 (案例 文件 ，ch12\12.4.html)。 


<!DOCTYPE html> 

<html> 

<head> 

<title> 使 用 readAsText 方法 读 取 文 本 文件 </title> 
</head> 

<body> 

<script type="text/javascript"> 

var result=document.getElementById ("result"); 
var file=document .getElementById ("file"); 


// 判 断 浏览 器 是 否 支持 FileReader 接口 


if (typeof FileReader == 'undefined'){ 
result.InnerHTML="<p> 你 的 浏览 器 不 支持 FileReader 接口 ! </p>"; 
// 使 选择 控件 不 可 操作 


file.setAttribute ("disabled", "disabled"); 
} 
function readAsText () { 
var file = document.getElementById("file") .files[0]; 
var reader = new FileReader(); 
// 将 文件 以 文本 形式 读 入 页 面 
reader .readAsText (file, "gb2312"); 
reader.onload=function (f) { 
var result=document.getElementById ("result"); 
// 显 示 文 件 


result.innerHTML=this.result; 


} 


</script> 


<p> 


<label> 请 选择 一 个 文件 : </label> 
<input type="file" id="file" /> 


<input type="button" value=" 读 取 文本 文件 " onclick="readRsText ()" /> 


</p> 


<div id="result" name="result"></div> 


</body> 
</html> 


在 TE 11.0 中 预览 ， 效 果 如 图 12-9 所 示 。 在 页 面 中 单 击 “ 浏 览 ”按钮 ， 打 开 “ 选 择 要 加 
载 的 文件 ”对 话 框 ， 在 其 中 选择 需要 读 取 的 文件 ， 如 图 12-10 所 示 。 
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所 示 。 


drop。 


12-9 ”预览 效果 


12-10 ”选择 要 读 取 的 文件 


选择 完毕 后 ， 在 “选择 要 加 载 的 文件 ”对 话 框 中 单 击 “ 打 开 ” 按 钮 ， 返 回 到 TE 11.0 中 ， 
然后 单 击 “ 读 取 文 本 文件 ”按钮 ， 即 可 在 页 面 的 下 方 读 取 文 本 文件 中 的 信息 ， 如 图 12-11 
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读 取 文本 文件 











12-11 读 取 文 本 信息 


12.3 使 用 HTML 5 实现 文件 的 拖 放 


使 用 HIML 5 可 以 实现 拖 放 效 果 。 常 用 的 实现 方法 是 利用 HTML 5 新 增加 的 事件 drag 和 
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12.3.1 认识 文件 拖 放 的 过 程 


在 HTML 5 中 实现 文件 的 拖 放 主 要 有 以 下 4 个 步骤 。 
1. 设置 元 素 为 可 拖 放 
首先 ， 为 了 使 元 素 可 拖 动 ， 把 draggable 属性 设置 为 tue， 具 体 代码 如 下 : 


<img draggable="true" /> 


2. 拖 动 什么 

实现 拖 放 的 第 二 步 就 是 设置 拖 动 的 元 素 ， 常 见 的 元 素 有 图 片 、 文 字 、 动 画 等 。 实 现 拖 放 
功能 的 是 ondragstart 和 setData()， 即 规定 当 元 素 被 拖 动 时 ， 会 发 生 什么 。 

例如 : 在 上 面 的 例子 中 ，ondragstart 属性 调用 了 一 个 函数 drag(event)， 它 规定 了 被 拖 动 的 
数据 。 

dataTransfer.setData() 方 法 设置 被 拖 数据 的 数据 类 型 和 值 ， 具 体 代 码 如 下 : 


function drag(ev) 


{ 


ev.dataTransfer.setData("Text",ev.target.id); 


} 

在 这 个 例子 中 ， 数 据 类 型 是 "Text"， 值 是 可 拖 动 元 素 的 id ("drag1")。 

3. 放 到 何 处 

实现 拖 放 功 能 的 第 三 步 就 是 将 可 拖 放 元 素 放 到 何 处 ， 实 现 该 功能 的 事件 是 ondragover， 
在 默认 情况 下 ， 无 法 将 数据 /元 素 放 置 到 其 他 元 素 中 。 如 果 需 要 设置 允许 放置 ， 用 户 必须 阻止 
对 元 素 的 默认 处 理 方式 。 

这 就 需要 通过 调用 ondragover 事件 的 event.preventDefault) 方法 ， 具 体 代码 如 下 : 


event .preventDefault () 


4. 进行 放置 
当 放置 被 拖 数据 时 ， 就 会 发 生 drop 事件 。 在 上 面 的 例子 中 ，ondrop 属性 调用 了 一 个 函数 
drop(event)， 具 体 代 码 如 下 : 


function drop (ev) 

33 

ev.preventDefault (); 

var data=ev.dataTransfer.getData ("Text"); 

ev.target .appendChild (document .getElementById (data) ) 7 
} 


12.3.2 ”浏览 器 支持 情况 
不 用 的 浏览 器 版 本 对 拖 放 技术 的 支持 情况 是 不 同 的 ， 如 表 12-2 所 示 是 常见 浏览 器 对 拖 放 


au 




















技术 的 支持 情况 。 3 

R12-2 浏览 器 对 拖 放 技术 的 支持 情况 = 

浏览 器 名 称 支持 Web 存储 技术 的 版 本 3 

Internet Explorer Internet Explorer 9 及 更 高 版 本 由 

Firefox Firefox 3.6 及 更 高 版 本 让 

Opera Opera 12.0 及 更 高 版 本 是 

Safari Safari 5 及 更 高 版 本 放 
Chrome Chrome 5 及 更 高 版 本 





12.3.3 ”案例 5 一 一 在 网 页 中 拖 放 图 片 
下 面 给 出 一 个 简单 的 拖 放 实例 ， 该 实例 主要 实现 的 功能 就 是 把 一 张 图 片 拖 放 到 一 个 矩 NX 





形 中 。 
【 例 12.S】 将 图 片 拖 放 至 矩形 中 (案例 文件 ，ch12\12.5.html)。 


<!DOCTYPE HTML> 

<html> 

<head> 

<style type="text/css"> 

#divl {width:150px;height:150px;padding:10px;border:lpx solid #aaaaaa; } 
</style> 

<script type="text/javascript"> 

function allowDrop (ev) 

if 

ev.preventDefault (); 

} 

function drag (ev) 

{ 

ev.dataTransfer.setData("Text",ev.target.id); 

} 

function drop (ev) 

i 

ev.preventDefault (); 

var data=ev.dataTransfer.getData ("Text"); 

ev.target .appendChild (document .getElementById (data) ); 
} 

</script> 

</head> 

<body> 

<p> 请 把 图 片 拖 放 到 和 矩形 中 : </p> 

<div id="divl" ondrop="drop (event)" ondragover="allowDrop (event)"></div> 
<br /> 

<img id="dragl" src="images/2.gif" draggable="true" ondragstart="drag (event) " 
f= 

</body> 

</html> 
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将 上 述 代 码 保 存 为 .html 格式 ， 在 TE 11.0 中 预览 ， 效 果 如 图 12-12 所 示 。 
可 以 看 到 当选 中 图 片 后 ， 在 不 释放 鼠标 的 情况 下 ， 可 以 将 其 拖 放 到 算 形 框 中 ， 如 图 12-13 
所 示 。 
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请 把 图 片 拖 放 到 矩形 中 ， 
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图 12-12 ”预览 效果 图 12-13 se HH 


代码 解释 如 下 。 

(1) 调用 preventDefault(0 来 避免 浏览 器 对 数据 的 默认 处 理 (drop 事件 的 默认 行为 是 以 链接 
形式 打开 )。 

(2) 通过 dataTransfer.getData("Text") 方 法 获得 被 拖 的 数据 。 该 方法 将 返回 在 setData0 方 
法 中 设置 为 相同 类 型 的 任何 数据 。 

(3) 被 拖 数 据 是 被 拖 元 素 的 id ("drag1")。 

(4) 把 被 拖 元 素 追 加 到 放置 元 素 (目标 元 素 ) 中 。 


12.4 ”综合 案例 一 一 在 网 页 中 来 回 拖 放 图 片 


下 面 再 给 出 一 个 具体 实例 ， 该 实例 所 实现 的 效果 就 是 在 网 页 中 来 回 拖 放 图 片 。 具 体 代 码 
如 下 : 


<!DOCTYPE HTML> 

<html> 

<head> 

<style type="text/css"> 

#divl, #div2 

{float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px 
solid #aaaaaa;} 

</style> 

<script type="text/javascript"> 
function allowDrop (ev) 

{ 

ev.preventDefault (); 

} 

function drag (ev) 
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ev.dataTransfer.setData("Text",ev.target.id); 

ji 

function drop (ev) 

{ 

ev.preventDefault (); 

var data=ev.dataTransfer.getData ("Text"); 

ev.target .appendChild (document .getElementById (data) ) 7 

4 

</script> 

</head> 

<body> 

<div id="div1" ondrop="drop (event)" ondragover="allowDrop (event) "> 
<img src="images/l.gif" draggable="true" ondragstart="drag (event)" 

id="dragl" /> 

</div> 

<div id="div2" ondrop="drop (event)" ondragover="allowDrop (event) "></div> 

</body> 

</html> 


在 记事 本 中 输入 这 些 代码 ， 然 后 将 其 保存 为 .html 格式。 使 用 IE 11.0 打开 文件 ， 即 可 在 N 
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页 面 中 查看 效果 。 选 中 网 页 中 的 图 片 ， 即 可 在 两 个 矩形 中 来 回 拖 放 ， 如 图 12-14 所 示 。 
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12-14 ”预览 效果 


12.5” 跟 我 学 上 机 一 一 在 网 页 中 拖 放 文 字 


ETHET HTML 5 的 拖 放 技术 后 ， 下 面 给 出 一 个 具体 实例 ， 该 实例 所 实现 的 效果 就 是 在 
网 页 中 拖 放 文字 。 
【 例 12.6】 在 网 页 中 拖 放 文字 (案例 文件 : ch12\12.6.html). 


<!DOCTYPE HTML> 
<html> 
<head> 
<title> 拖 放 文字 </title> 
<style> 
body { 
font-family: "Microsoft YaHei'; 


$ 
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div.drag { 
background-color:#AACCFF; 
border:lpx solid #666666; 
cursor:move; 
height:100px; 
width: 100px; 
margin: 10px; 
float:left; 
} 
div.drop { 
background-color: #EEEEEE; 
border:lpx solid #666666; 
cursor: pointer; 
height:150px; 
width:150px; 
margin: 10px; 
float:left; 
} 
</style> 
</head> 
<body> 
<div draggable="true" class="drag" 
ondragstart="dragStartHandler (event)"> 拖 搜 我 吧 !</div> 
<div class="drop" 
ondragenter="dragEnterHandler (event) " 
ondragover="dragOverHandler (event) " 
ondrop="dropHandler (event)"> 放 这 里 吧 !<ol /></div> 
<script> 
var internalDNDType = 'text'; 
function dragStartHandler(event) { 
event .dataTransfer.setData (internalDNDType, 
event.target.textContent) ; 
event.effectAllowed = 'move'; 
} 
// dragEnter 事件 
function dragEnterHandler(event) { 
if (event.dataTransfer.types.contains (internalDNDType) ) 
if (event.preventDefault) event.preventDefault ();} 
// dragover 事件 
function dragOverHandler(event) { 
event.dataTransfer.dropEffect = 'copy'; 
if (event.preventDefault) event.preventDefault (); 
} 
function dropHandler(event) { 
var data = event.dataTransfer.getData (internalDNDType) ; 
var li = document.createElement ('li'); 
li.textContent = data; 
event.target.lastChild.appendChild(1li); 
} 
</script> 
</body> 
</html> 


下 面 介绍 实现 拖 放 的 具体 操作 步骤 。 


将 上 述 代码 保存 为 html 格式 的 文件 ， 在 正 11.0 中 预览 ， 效 果 如 图 12-15 所 示 。 


CUD 选中 左边 扎 形 中 的 元 素 ， 将 其 拖 奥 到 右边 的 方 框 中 ， 如 图 12-16 所 示 。 
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图 12-15 预览 效果 12-16 ”选中 被 拖 放 文字 


SSD 释放 鼠标 ， 可 以 看 到 拖 放 之 后 的 效果 ， 如 图 12-17 所 示 。 
SSD 还 可 以 多 次 拖 放 文字 元 素 ， 效 果 如 图 12-18 所 示 。 
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图 12-17 拖 放 一 次 12-18 拖 放 多 次 
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12.6 高 手 解 惑 


疑问 1: 在 HTML 5 中 ， 实 现 拖 放 效果 的 方法 是 唯一 的 吗 ? 


答 : 在 HIML 5 中 ， 实 现 拖 放 效 果 的 方法 并 不 是 唯一 的 。 除 了 可 以 使 用 事件 drag 和 drop 
外 ， 还 可 以 利用 canvas 标签 来 实现 。 


疑问 2: 在 HTML 5 中 ， 可 拖 放 的 对 象 只 有 文字 和 图 像 吗 ? 


答 : 在 默认 情况 下 ， 图 像 、 链 接 和 文本 是 可 以 拖 动 的 ， 也 就 是 说 ， 不 用 额外 编写 代码 ， 
用 户 就 可 以 拖 动 它们 。 文 本 只 有 在 被 选中 的 情况 下 才能 拖 动 ， 而 图 像 和 链接 在 任何 时 候 都 可 
以 拖 动 。 

如 果 让 其 他 元 素 可 以 拖 动 也 是 可 能 的 。HTML 5 为 所 有 HTML 元 素 规定 了 一 个 draggable 
属性 ， 表 示 元 素 是 否 可 以 拖 动 。 图 像 和 链接 的 draggable 属性 自动 被 设置 成 了 true， 而 其 他 元 
素 这 个 属性 的 默认 值 都 是 false。 要 想 让 其 他 元 素 可 以 拖 动 ， 或 者 让 图 像 或 链接 不 能 拖 动 ， 都 
可 以 设置 这 个 属性 。 
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疑问 3: 在 HTML 5 中 ， 读 取 记 事 本 文件 中 的 中 文 内 容 时 显示 乱码 怎么 办 呢 ? 
答 : 读者 需要 特别 注意 的 是 ， 读 取 文 件 内 容 时 可 能 显示 乱码 ， 如 图 12-19 所 示 。 


- oa 中 
@ 5) E CAUsers\adminstron O ~ GG 使用 readAsText 方 法 ，x DRAGA 


文件 (月 RSE EEV) 收藏 夫 (A) 工具 (T) 帮助 (H) 











请 选择 一 个 文件 。 CVUsers\adeinstror\Dl NA. | | ROMANE 


AAA 人 AAA 
960660600r000005000000000500009 

















图 12-19 读 取 文 件 内 容 时 显示 乱码 
这 里 的 原因 是 在 读 取 文件 时 ， 没 有 设置 读 取 的 编码 方式 。 例 如 下 面 的 代码 : 


reader.readAsText (file); 


设置 读 取 的 格式 ， 如 果 是 中 文 内 容 ， 修 改 如 下 : 


reader.readAsText (file, "gb2312"); 
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13.1 Geolocation API 获取 地 理 位 置 


在 HTML 5 网 页 代码 中 ， 通 过 一 些 有 用 的 API， 可 以 查找 访问 者 当前 的 位 置 。 


13.1.1 地 理 地 位 的 原理 


由 于 访问 者 浏览 网 站 的 方式 不 同 ， 可 以 通过 下 列 方 式 确定 其 位 置 。 

(1) 如 果 网 站 浏览 者 使 用 电脑 上 网 ， 通 过 获取 浏览 者 的 了 P 地 址 ， 从 而 确定 其 具体 位 置 。 

D 如 果 网 站 浏览 者 通过 手机 上 网 ， 通 过 获取 浏览 者 的 手机 信号 接收 塔 ， 从 而 确定 其 具 
体位 置 。 

(3) 如 果 网 站 浏览 者 的 设备 上 具有 GPS 硬件 ， 通 过 获取 GPS 发 出 的 载波 信号 ， 可 以 获取 
其 具体 位 置 。 

(4) 如 果 网 站 浏览 者 通过 无 线 上 网 ， 可 以 通过 无 线 网 络 连 接 获 取 其 具体 位 置 。 


Pm API 是 应 用 程序 的 编程 接口 ， 是 一 些 预先 定义 的 函数 ， 目 的 是 让 开发 人 员 调 
民用 需要 的 功能 程序 ， 而 又 无 须 访 问 源码 ， 或 理解 内 部 工作 机 制 的 细节 。 


13.1.2 ”获取 定位 信息 的 方法 


在 了 解 了 地 理 定位 的 原理 后 ， 下 面 介绍 获取 定位 信息 的 方法 ， 根 据 访问 者 访问 网 站 的 方 
式 ， 可 以 通过 下 列 方法 之 一 确定 地 理 位 置 。 

(1) 利用 下 地 址 定位 。 

(2) 利用 GPS 功能 定位 。 

(3) 利用 Wi-Fi 定位 。 

(4) 利用 Wi-Fi 和 GPRS 联合 定位 。 

(5) 利用 用 户 自 定义 定位 数据 定位 。 

使 用 上 述 的 哪 种 方法 将 取决 于 浏览 器 和 设备 的 功能 。 然 后 ， 浏 览 器 确定 位 置 并 将 其 传输 
回 地 理 位 置 ， 但 需要 注意 的 是 无 法 保证 返回 的 位 置 是 设备 的 实际 地 理 位 置 。 因 为 ， 这 涉及 一 
个 隐私 问题 ， 并 不 是 每 个 人 都 想 与 您 共享 他 的 位 置 。 


13.13 ”常用 地 理 定位 方法 


通过 地 理 定位 ， 可 以 确定 用 户 的 当前 位 置 ， 并 能 获取 用 户 地 理 位 置 的 变化 情况 。 其 中 ， 
最 常用 的 就 是 API 中 的 getCurrentposition 方法 。 
getCurrentposition 方法 的 语法 格式 如 下 : 


void getCurrentPosition(successCallback, errorCallback, options); 


其 中 ，successCallback 参数 是 指 在 位 置 成 功 获取 时 用 户 想 要 调用 的 函数 名 称 ; 
errorCallback 参数 是 指 在 位 置 获取 失败 时 用 户 想 要 调用 的 函数 名 称 ; options 参数 指出 地 理 





定位 时 的 属性 设置 。 
— 
A 访问 用 户 位 置 是 耗 时 的 操作 ， 同 时 属于 隐私 问题 ， 还 要 取得 用 户 的 同意 。 


如 果 地 理 定位 成 功 ， 新 的 Position 对 象 将 调用 displayOnMap 函数 ， 显 示 设 备 的 当前 
位 置 。 

那么 Position 对 象 的 含义 是 什么 呢 ? 作 为 地 理 定位 的 API，Position 对 象 包含 位 置 确 定时 
的 时 间 戳 (timestamp) 和 包含 位 置 的 坐标 (coords)， 有 具体 语法 格式 如 下 : 


Interface Position 


PEER the, 外 A 


readonly attribute Coordinates cords; 
readonly attribute DOMTimeStamp timestamp; 
}; 


13.1.4 判断 浏览 器 是 否 支持 HTML 5 获取 地 理 位 置信 息 


在 用 户 试图 使 用 地 理 定位 之 前 ， 应 该 先 确保 浏览 器 是 否 支持 HIML 5 获取 地 理 位 置信 
。 这 里 介绍 判断 的 方法 。 具 体 代码 如 下 : 


function init() 
if (navigator.geolocation) { 


// 获 取 当 前 地 理 位 置信 息 


navigator.geolocation.getCurrentPosition(onSuccess, onError, options); 
} else { 


alert ("你 的 浏览 器 不 支持 HTML 5 来 获取 地 理 位 置信 息 。") 7 


该 代码 解释 如 下 。 
1. onSuccess 


该 函数 是 获取 当前 位 置信 息 成 功 时 执行 的 回调 函数 。 

在 onSuccess 回调 函数 中 ， 用 到 了 参数 position， 代 表 一 个 具体 的 position 对 象 ， 表 示 当 
前 位 置 。 其 具有 如 下 属性 。 

(1) latitude: 当前 地 理 位 置 的 纬度 。 

(2) longitude: 当前 地 理 位 置 的 经 度 。 

(3) altitude: 当前 位 置 的 海拔 高 度 (不 能 获取 时 为 null)。 

(4) accuracy: 获取 到 的 纬度 和 经 度 的 精度 (以 米 为 单位 )。 

(5) altitudeAccuracy: 获取 到 的 海拔 高 度 的 精度 (以 米 为 单位 )。 

(6) heading: 设备 的 前 进 方向 。 用 面 朝 正 北方 向 的 顺 时 针 旋 转角 度 来 表示 (不 能 获取 时 为 
null). 

(T) speed: 设备 的 前 进 速度 (以 米 / 秒 为 单位 ， 不 能 获取 时 为 null)。 

(8) timestamp: 获取 地 理 位 置信 息 时 的 时 间 。 


证 
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2. onError 


该 函数 是 获取 当前 位 置信 息 失败 时 所 执行 的 回调 函数 。 

在 onError 回调 函数 中 ， 用 到 了 error 参数 。 其 具有 如 下 属性 。 
(1) code: 错误 代码 ， 有 如 下 值 。 

© 用 户 拒 绝 了 位 置 服务 (属性 值 为 1)。 

© 获取 不 到 位 置信 息 (属性 值 为 2)。 

© ”获取 信息 超时 错误 (属性 值 为 3)。 

(2) message: 字符 串 ， 包 含 了 具体 的 错误 信息 。 


3. options 


options 是 一 些 可 选 熟悉 列表 。 在 options 参数 中 ， 可 选 属性 如 下 。 

(1) enableHighAccuracy: 是 否 要 求 高 精度 的 地 理 位 置信 息 。 

(2) timeout: 设置 超时 时 间 ( 单 位 为 毫秒 )。 

(3) maximumAge: 对 地 理 位 置信 息 进 行 缓存 的 有 效 时 间 ( 单 位 为 毫秒 )。 


13.15 指定 纬度 和 经 度 坐 标 
对 于 地 理 定位 成 功 后 ， 将 调用 displayOnMap 函数 。 此 函数 如 下 : 


function displayOnMap (position) 

{ 

var latitude=positon.coords.latitude; 

var longitude=postion.coords. longitude; 

} 

其 中 第 一 行 函数 从 Position 对 象 获 取 coordinates 对 象 ， 主 要 由 API 传递 给 程序 调用 。 第 
三 行 和 第 四 行 中 定义 了 两 个 变量 ，latitude 和 longitude 属性 存储 在 定义 的 两 个 变量 中 。 

为 了 在 地 图 上 显示 用 户 的 具体 位 置 ， 可 以 利用 地 图 网 站 的 API。 下 面 以 使 用 百度 地 图 为 
例 进 行 讲解 ， 则 需要 使 用 Baidu Maps JavaScript API。 在 使 用 此 API 前 ， 需 要 在 HTML 5 页 面 
中 添加 一 个 引用 ， 有 具体 代码 如 下 : 


<--baidu maps API> 

<script type= "text/javascript" scr= "http://api.map.baidu.com/api?key=* &v= 

1.0&services=true"> 

</script> 

其 中 “*” 代 码 注册 到 key。 注 册 key 的 方法 为 : 在 http: //openapi.baidu.com/map/index html 网 
页 中 ， 注 册 百 度 地 图 API， 然 后 输入 需要 内 置 百度 地 图 页 面 的 URL 地 址 ， 生 成 API 密 钥 ， 然 
后 将 key 文件 复制 保存 。 

虽然 已 经 包含 了 Baidu Maps JavaScript， 但 是 页 面 中 还 不 能 显示 内 置 的 百度 地 图 ， 还 需要 
添加 html 语言 ， 让 地 图 从 程序 转化 为 对 象 。 需 要 加 入 以 下 源 代码 : 

<script 

type="text/javascript"scr="http://api.map.baidu.com/api?key=* &v=1.0&service 

s=true"> 





</script> 

<div style="width: 600px; height :220px;border:lpx solid gary;margin— 
top:15px;" id="container"> 

</div> 

<script type="text/javascript"> 

var map = new BMap.Map ("container"); 
map.centerAndZoom(new BMap. Point (***,***),17); 
map.addControl (new BMap.NavigationControl ()); 
map.addControl (new BMap.ScaleControl()); 
map.addControl (new BMap.OverviewMapControl ()); 
var local = new BMap.LocalSearch (map, 

{ 

enderOptions:{map: map} 

} 

); 

local. search (" 输 入 搜索 地 址 ") ; 


</script> 

上 述 代 码 分 析 如 下 。 

(1) 其 中 前 2 行 主要 是 把 baidu map API 程序 植 入 源码 中 。 

(2) 第 3 行 在 页 面 中 设置 一 个 标签 ， 包 括 宽度 和 长 度 ， 用 户 可 以 自己 调整 ，border=1px 
是 定义 外 框 的 宽度 为 1 个 像素 ，solid 为 实 线 ，gray 为 边框 显示 颜色 ，margin-top 为 该 标签 与 
上 部 的 距离 。 

(3) 第 7 行为 地 图 中 自己 位 置 的 坐标 。 

(4) 第 8 到 第 10 行为 植 入 地 图 缩放 控制 工具 。 

(5) 第 11 到 第 16 行为 地 图 中 自己 的 位 置 ， 只 需要 在 local search 后 填 入 自己 的 位 置 名 称 
即 可 。 


13.16 ”获取 当前 位 置 的 经 度 与 纬度 


如 下 代码 为 使 用 纬度 和 经 度 定位 坐标 的 案例 。 
打开 记事 本 文件 ， 在 其 中 输入 如 下 代码 : 


<!DOCTYPE html> 

<html> 

<head> 

<tit1le> 纬 度 和 经 度 坐标 </title> 

<style> 

body {background-color:#fff; } 

</style> 

</head> 

<body> 

<p id="geo loc"><p> 

<script> 

function getElem(id) { 
return typeof id === 'string' ? document.getElementById(id) : id; 


PERERA fhe, 名 A 








} 


function show it(lat, lon) { 


var str =' 您 当前 的 位 置 ， 纬 度 : ' + lat + ', AB: ' + lon; 
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getElem('geo loc') -innerHTML = str; 
} 
if (navigator.geolocation) { 
navigator.geolocation.getCurrentPosition(function(position) { 
show it (position.coords.latitude, position.coords.longitude) ; 
Ye 
function(err) { 


getElem('"geo_loc').innerHTML = err.code + "|" + err.message; 
He 
} else { 


getElem('geo loc').innerHTML = "您 当前 使 用 的 浏览 器 不 支持 Geolocation 服务 "; 





} 
</script> 
</body> 
</html> 


CSTD (HM IE 11.0 打开 网 页 文件 ， 由 于 使 用 HTML 5 定位 功能 首先 要 由 用 户 允 许 网 页 
运行 脚本 ， 所 以 弹出 如 图 13-1 所 示 的 提示 框 ， 单 击 “ 人 允许 阻止 的 内 容 ” 按 钮 。 
CIID 洋 出 想 要 跟踪 实际 位 置 的 提示 信息 ， 单 击 “ 人 允许 一 次 ”按钮 ， 如 图 13-2 所 示 。 
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Internet Explorer 已 限制 此 网 页 运行 脚本 或 ActiveX 控件 。 “ 网 络 科技 BESTA. * 
| 允许 阻止 的 内 容 (A) 允许 一 次 (A) 


图 13-1 允许 网 页 运行 脚本 图 13-2 ”允许 跟踪 实际 位 置 


EET 在 页 面 中 显示 了 当前 页 面 打开 时 所 处 的 地 理 位 置 ， 其 位 置 为 使 用 者 的 IP 或 GPS 
定位 地 址 ， 如 图 13-3 所 示 。 
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您 当前 的 位 置 ， 纬 度 ，43. 7878， 经 度 ，87. 5862 














图 13-3 ”显示 的 地 理 位 置 


每 次 使 用 浏览 器 打开 网 页 时 都 会 提醒 是 否 允 许 跟踪 实际 位 置 ， 为 了 安全 ， 用 
户 应 当 受 善 使 用 地 址 共享 功能 。 


Al 


13.1.7 “处理 错误 和 拒绝 


getCurrentPosition) 方法 的 第 二 个 参数 用 于 处 理 错误 。 它 规定 当 获 取 用 户 位 置 失败 时 运行 
的 函数 。 例 如 以 下 代码 : 

function showError (error) 

{ 


switch (error.code) 


{ 

case error.PERMISSION DENIED: 
x.innerHTML=" 用 户 拒 绝对 获取 地 理 位 置 的 请 求 。" 
break; 

Case error.POSITION UNAVAILABLE: 
x.innerHTML=" 位 置信 息 是 不 可 用 的 。" 
break; 

case error.TIMEOUT: 
x.innerHTML=" 请 求 用 户 地 理 位 置 超时 。" 
break; 

Case error.UNKNOWN ERROR: 
x.innerHTML=" 未 知 错误 。" 
break; 

} 
} 


其 中 PERMISSION_DENIED 表示 用 户 不 允许 地 理 定位 ， POSITION_UNAVAILABLE 表 
示 无 法 获取 当前 位 置 ，TIMEOUT 表示 操作 超时 ，UNKNOWN ERROR 表示 未 知 的 错误 。 针 
对 不 同 的 错误 类 型 ， 将 弹出 不 同 的 错误 信息 。 


13.2 ”目前 浏览 器 对 地 理 定位 的 支持 情况 


不 同 的 浏览 器 版 本 对 地 理 定位 技术 的 支持 情况 是 不 同 的 。 表 13-1 是 常见 浏览 器 对 地 理 定 
位 的 支持 情况 。 


表 13-1 常见 浏览 器 对 地 理 定位 的 支持 情况 











浏览 器 名 称 支持 Web 存储 技术 的 版 本 
Internet Explorer Internet Explorer 9 及 更 高 版 本 
Firefox Firefox 3.5 及 更 高 版 本 
Opera Opera 10.6 及 更 高 版 本 
Safari Safari 5 及 更 高 版 本 
Chrome Chrome 5 及 更 高 版 本 
Android Android 2.1 及 更 高 版 本 
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13.3 ”综合 案例 一 一 在 网 页 中 调用 Google 地 图 


本 实例 介绍 如 何在 网 页 中 调用 Google 地 图 ， 以 获取 当前 设备 物理 地 址 的 经 度 与 纬度 。 具 


体操 作 步 骤 如 下 。 


调用 Google Map， 代 码 如 下 : 


<!DOCTYPE html> 

<head> 

<title> 获 取 当 前 位 置 并 显示 在 google 地 图 上 </title> 

<script type="text/javascript" src="http://maps.google.com/maps/api/ 
js?sensor=false"></script> 

<script type="text/javascript"> 


获取 当前 地 理 位 置 ， 代 码 如 下 : 


navigator.geolocation.getCurrentPosition(function (position) { 
var coords = position.coords; 
//console.log (position); 


SSD 设 定 地 图 参数 ， 代 码 如 下 : 


var latlng = new google.maps.LatLng(coords.latitude, coords.longitude) ; 
var myOptions = { 

zoom: 14，// 设 定 放大 倍数 

center: latlng，// 将 地 图 中 心 点 设 定 为 指定 的 坐标 点 

mapTypeId: google.maps.MapTypeId.ROADMAP // 指 定 地 图 类 型 

Pa 


创建 地 图 ， 并 在 页 面 中 显示 ， 代 码 如 下 : 
var map = new google.maps.Map (document .getElementById ("map"), myOptions) ; 
在 地 图 上 创建 标记 ， 代 码 如 下 : 


var marker = new google.maps.Marker ({ 
position: latlng，// 将 前 面 设 定 的 坐标 标注 出 来 
map: map // 将 该 标注 设置 在 刚才 创建 的 map 中 

he 


创建 窗 体内 的 提示 内 容 ， 代 码 如 下 : 


var infoWindow = new google.maps.Infowindow({ 

content: "当前 位 置 : <br/> 经 度 : " + lating.lat() + "<br/> 纬 度 : " + lating.1ng() 
// 提 示 窗 体内 的 提示 信息 

he 


SSP 打开 提示 窗口 ， 代 码 如 下 : 


infoWindow.open(map, marker) ; 
tr 


CIID 根据 需要 再 编写 其 他 相关 代码 ， 如 处 理 错误 的 方法 和 打开 地 图 的 大 小 等 。 查 看 
此 时 页 面相 应 的 HTML 源 代码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<title> 获 取 当 前 位 置 并 显示 在 google 地 图 上 </title> 

<script type="text/javascript" src="http://maps.google.com/maps/api/ 
js?sensor=false"></script> 

<script type="text/javascript"> 

function init() { 

if (navigator.geolocation) { 

// 获 取 当 前 地 理 位 置 

navigator.geolocation.getCurrentPosition(function (position) { 

var coords = position.coords; 

//console.log (position); 

// 指 定 一 个 google 地 图 上 的 坐标 点 ， 同 时 指定 该 坐标 点 的 横 坐 标 和 纵 坐 标 

var latlng = new google.maps.LatLng(coords.latitude, coords.longitude) ; 
var myOptions = { 

zoom: 14，// 设 定 放大 倍数 

center: latlng，// 将 地 图 中 心 点 设 定 为 指定 的 坐标 点 

mapTypeId: google.maps.MapTypeId.ROADMAP // 指 定 地 图 类 型 


PEER fhe, 中 





Ve 

// 创 建 地 图 ， 并 在 页 面 map 中 显示 

var map = new google.maps.Map (document .getElementById ("map"), myOptions); 
// 在 地 图 上 创建 标记 

var marker = new google.maps.Marker({ 
position: latlng，// 将 前 面 设 定 的 坐标 标注 出 来 
map: map // 将 该 标注 设置 在 刚才 创建 的 map 中 

We 

// 标 注 提示 窗口 

var infoWindow = new google.maps.InfoWindow({ 
content: "当前 位 置 ， <br/> 经 度 : " + latlng.lat() + "<br/> 纬 度 : " + latlng.1ng() 
// 提 示 窗 体内 的 提示 信息 

pa 

// 打 开 提示 窗口 

infoWindow.open(map, marker); 

} 

function (error) { 

// 处 理 错误 

switch (error.code) { 

case 1: 

alert ("位 置 服务 被 拒绝 。") ; 

break; 

case 2: 

alert ("暂时 获取 不 到 位 置信 息 。") ; 

break; 

Case 3: 

alert ("获取 信息 超时 。") ; 

break; 

default: 

alert ("未 知 错误 。") ; 

break; 

} 

he 

Feise 

alert (" 你 的 浏览 器 不 支持 HTML 5 来 获取 地 理 位 置信 息 。") ; 


À 
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} 
</script> 
</head> 


<body onload="init()"> 

<div id="map" style="width: 800px; height: 600px"></div> 
</body> 

</html> 


保存 网 页 后 ， 即 可 查看 最 终 效果 ， 如 图 13-4 所 示 。 
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13-4 调用 Google 地 图 


13.4” 跟 我 学 上 机 一 一 持续 获取 用 户 移动 后 的 位 置 


类 似 汽车 上 的 GPS 定位 系统 一 样 ， 在 HTML 5 网 页 中 ， 用 户 也 可 以 持续 获取 到 移动 设备 


的 位 置 。 这 里 使 用 watchPosition0 方 法 ， 不 仅 可 以 返回 用 户 的 当前 位 置 ， 而 且 可 以 继续 返回 用 
户 移 动 时 的 更 新 位 置 ， 从 而 实现 类 似 GPS 定位 系统 一 样 的 功能 。 


CED 打开 记事 本 文件 ， 在 其 中 输入 如 下 代码 : 


<!DOCTYPE html> 

<html> 

<head> 

<title> 持 续 获取 当前 的 位 置 </title> 

</head> 

<body> 

<p id="demo"> 获 取 当 前 位 置 : </p> 

<button onclick="getLocation()"> 定 位 当前 位 置 </button> 
<script> 

var x=document .getElementById ("demo"); 
function getLocation () 


if (navigator.geolocation) 
{ 
navigator.geolocation.watchPosition(showPosition) ; 


} 


else 


{ 
x.innerHTML=" 该 浏览 器 不 支持 获取 地 理 位 置 。"; 
} 


saimmeen mes M 


} 


function showPosition (position) 


{ 


x.innerHTML=" 纬 度 : " + position.coords.latitude + 
"<br> 经 度 : " + position.coords.longitude; 

} 

</script> 

</body> 

</html> 


ESI 使 用 正 11.0 打开 网 页 文件 ， 如 图 13-5 所 示 。 单 击 “定位 当前 位 置 ”按钮 ， 即 可 
获取 目前 的 位 置 ， 如 图 13-6 所 示 。 用 户 移动 位 置 后 ， 再 次 单 击 “ 定 位 当前 位 置 ” 按 
钮 ， 就 会 发 现 坐标 发 生 了 变化 。 
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13-5 ”程序 运行 结果 A136 获取 当前 位 置 


13.5 高 手 解 惑 


疑问 1: 使 用 HTML 5 Geolocation API 获得 的 用 户 地 理 位 置 一 定 精准 无 误 吗 ? 


答 : 不 一 定 精准 ， 因 为 该 特性 可 能 侵犯 用 户 的 隐私 ， 除 非 用 户 同意 ， 否 则 用 户 位 置信 息 
是 不 可 用 的 。 

疑问 2: 地 理 位 置 API 可 以 在 国际 空间 站 上 使 用 吗 ? 可 以 在 月 球 上 或 者 其 他 星球 上 用 吗 ? 

答 : 地 理 位 置 标准 是 这 样 阐述 的 : “地 理 坐 标 参考 系 的 属性 值 来 自 大 地 测量 系统 (World 
Geodetic System (2d) [WGS84])。 不 支持 其 他 参考 系 。” 国 际 空间 站 位 于 地 球 轨道 上 ， 所 以 宇 
航 员 可 以 使 用 经 纬度 和 海拔 来 描述 其 位 置 。 但 是 ， 大 地 测量 系统 是 以 地 球 为 中 心 的 ， 因 此 也 
就 不 能 使 用 这 个 系统 来 描述 月 球 或 者 其 他 星球 的 位 置 了 。 
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通信 技术 


Web Storage 是 HIML 5 引入 的 一 个 非常 重要 的 功能 ， 可 以 在 客户 端 本 地 存储 
数据 ， 类 似 HIML 4 的 Cookie， 但 可 实现 的 功能 要 比 Cookie 强大 得 多 。Cookie 大 
小 被 限制 在 4KB， 而 Web Storage 官方 建议 为 每 个 网 站 SMB. AIh, Web 通信 技 
术 可 以 更 好 地 完成 跨 域 数据 的 通信 ， 以 及 Web 即时 通信 应 用 的 实现 ， 如 Web 
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14.1 认识 Web 存储 


在 HIML 5 标准 之 前 ，Web 存储 信息 需要 Cookie 来 完成 ， 但 是 Cookie 不 适合 大 量 数据 
的 存储 ， 因 为 它们 由 每 个 对 服务 器 的 请 求 来 传递 ， 这 使 得 Cookie 速度 很 慢 而 且 效 率 也 不 高 。 
为 此 ， 在 HTML 5 中 ，Web 存储 API 为 用 户 如 何在 计算 机 或 设备 上 存储 用 户 信息 做 了 数据 标 
准 的 定义 。 


14.1.1 本 地 存储 和 Cookies 的 区 别 


本 地 存储 和 Cookies 扮演 着 类 似 的 角色 ， 但 是 它们 有 根本 的 区 别 。 

(1) 本 地 存储 是 仅 存 储 在 用 户 的 硬盘 上 ， 并 等 待 用 户 读 取 ， 而 Cookies 是 在 服务 器 上 
读 取 。 

(2) 本 地 存储 仅 供 客户 端 使 用 ， 如 果 需 要 服务 器 端 根 据 存 储 数值 做 出 反应 ， 就 应 该 使 用 
Cookies 。 

G) 读 取 本 地 存储 不 会 影响 到 网 络 带 宽 ， 但 是 使 用 Cookies 将 会 发 送 到 服务 器 ， 这 样 会 
影响 到 网 络 带宽 ， 无 形 中 增加 了 成 本 。 

(4) 从 存储 容量 上 看 ， 本 地 存储 可 存储 多 达 SMB 的 数据 ， 而 Cookies 最 多 只 能 存储 4KB 
的 数据 信息 。 


14.1.2 Web 存储 方法 


在 HTML 5 标准 中 ， 提 供 了 以 下 两 种 在 客户 端 存储 数据 的 新 方法 。 

(1) sessionStorage。sessionStorage 是 基于 session 的 数据 存储 ， 在 关闭 或 者 离开 网 站 后 ， 
数据 将 会 被 删除 ， 也 被 称 为 会 话 存储 。 

(2) localStorage。localStorage 是 没有 时 间 限 制 的 数据 存储 ， 也 被 称 为 本 地 存储 。 

与 会 话 存储 不 同 ， 本 地 存储 将 在 用 户 计 算 机 上 永久 保持 数据 信息 。 关 闭 浏 览 器 窗口 后 ， 
如 果 再 次 打开 该 站 点 ， 将 可 以 检索 所 有 存储 在 本 地 的 数据 。 

在 HTML 5 中 ， 数 据 不 是 由 每 个 服务 器 请 求 传递 的 ， 而 是 只 有 在 请 求 时 使 用 数据 ， 这 样 
的 话 ， 存 储 大 量 数据 时 不 会 影响 网 站 性 能 。 对 于 不 同 的 网 站 ， 数 据 存储 于 不 同 的 区 域 ， 并 且 
一 个 网 站 只 能 访问 其 自身 的 数据 。 

or HTML 5 使 用 JavaScript 来 存储 和 访问 数据 。 为 此 ， 建 议 用 户 可 以 多 了 解 一 

X 下 JavaScript 的 基本 知识 。 


14.2 使 用 HTML 5 Web Storage API 


使 用 HTML 5 Web Storage API 技术 ， 可 以 实现 很 好 的 本 地 存储 。 


14.2.1 测试 浏览 器 的 支持 情况 

Web Storage 在 各 大 主流 浏览 器 中 都 得 到 了 支持 ， 但 是 为 了 兼容 老 的 浏览 器 ， 还 是 要 检查 
一 下 是 否 可 以 使 用 这 项 技术 ， 主 要 有 以 下 两 种 方法 。 

1. 通过 检查 Storage 对 象 是 否 存在 


第 一 种 方式 : 通过 检查 Storage 对 象 是 否 存在 ， 来 检查 浏览 器 是 否 支持 Web Storage。 代 
码 如 下 : 


if (typeof (Storage) !=="undefined") 


samian com aris M 


// 是 的 ! 支持 localStorage sessionStorage 对 象 ! 
WW 一些 代码 3 

} else { 
// OW! 不 支持 web 存储 。 


if (typeof (Storage) !=="undefined") { 

// 是 的 ! 支持 localStorage sessionStorage WR! 
// 一 些 代码 ..... 

} else { 


// 抱 歉 ! 不 支持 web 存储 。 
} 





2. 分 别 检查 各 自 的 对 象 
第 二 种 方式 ;分 别 检查 各 自 的 对 象 。 例 如 : 检查 localStorage 是 否 支 持 。 代 码 如 下 : 


if (typeof(localStorage) == 'undefined' ) { 

alert ('Your browser does not support HTML 5 localStorage. Try upgrading.'); 
} else { 

// 是 的 ! 支持 localstorage sessionStorage WR! 

// 一 些 代码 ..... 

} 

或 者 : 

if('localStorage' in window && window['localStorage'] !== null){ 
// 是 的 ! 支持 localstorage sessionStorage WR! 

hs 

} else { 


alert ('Your browser does not support HTML 5 localStorage. Try upgrading.'); 
i 

或 者 

if (!!localStorage) { 

// 是 的 ! 支持 localstorage sessionStorage WK! 

// 一 些 代码 .... 

} else { 

alert (' 您 的 浏览 器 不 支持 localstorage sessionStorage 对 象 !'); 

$ 
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14.2.2 ”案例 1 一 使 用 sessionStorage 方法 创建 对 象 


sessionStorage 方法 针对 一 个 session 进行 数据 存储 。 在 用 户 关闭 浏览 器 窗口 后 ， 数 据 会 被 
自动 删除 。 

创建 一 个 sessionStorage 方法 的 基本 语法 格式 如 下 : 

<script type="text/javascript"> 


sessionStorage.abc=" "7 
</script> 


1. 创建 对 象 
【 例 14.1】 使 用 sessionStorage 方法 创建 对 象 (案例 文件 : ch14\14.1.html). 


<!DOCTYPE HTML> 

<html> 

<body> 

<script type="text/javascript"> 
sessionStorage. name=" 努 力 过 好 每 一 天 ! "; 
document .write(sessionStorage.name) ; 
</script> 

</body> 

</html> 


在 Firefox 53.0 中 浏览 ， 效 果 如 图 14-1 所 示 。 即 可 看 到 使 用 sessionStorage 方法 创建 的 对 
象 内 容 显示 在 网 页 中 。 
RAO M0 8V 历史 #20 IAD 和 go xX 
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14-1 使 用 sessionStorage 方法 创建 对 象 
2. 制作 网 站 访问 记录 计数 器 


下 面 继续 使 用 sessionStorage 方法 来 做 一 个 实例 ， 主 要 制作 记录 用 户 访问 网 站 次 数 的 计数 器 。 
【 例 14.2】 制 作 网 站 访问 记录 计数 器 (案例 文件 ，ch14\14.2.html)。 


<!DOCTYPE HTML> 
<html> 
<body> 
<script type="text/javascript"> 
if (sessionStorage. count) 
f 
sessionStorage.count=Number (sessionStorage.count) +1; 
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} 
else 

{ 

sessionStorage. count=1; 

} 
document .write ("您 访问 该 网 站 的 次 数 为 : " + sessionstorage.count); 
</script> 
</body> 
</html> 


在 Firefox 53.0 中 浏览 ， 效 果 如 图 14-2 所 示 。 如 果 用 户 刷新 一 次 页 面 ， 计 数 器 的 数值 将 
进行 加 1。 
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14-2 ”使 用 sessionStorage 方法 创建 计数 器 


TE 如 果 用 户 关闭 浏览 器 窗口 ， 再 次 打开 该 网 页 ， 计 数 器 将 重 置 为 1 





14.2.3 ”案例 2 一 使 用 localStorage 方法 创建 对 象 


与 sessionStorage 方法 不 同 ，localStorage 方法 存储 的 数据 没有 时 间 限 制 。 也 就 是 说 ， 网 页 
浏览 者 关闭 网 页 很 长 一 段 时 间 后 ， 再 次 打开 此 网 页 时 ， 数 据 依 然 可 用 。 
创建 一 个 localStorage 方法 的 基本 语法 格式 如 下 : 


<script type="text/javascript"> 
localStorage.abc=" "7 
</script> 


1. 创建 对 象 
【 例 14.3】 使 用 localStorage 方法 创建 对 象 (案例 文件 : ch14\14.3.html). 


<!DOCTYPE HTML> 

<html> 

<body> 

<script type="text/javascript"> 
localStorage.name="24>) HTML 5 最 新 的 技术 : Web Fik"; 
document .write (localStorage.name) ; 

</script> 

</body> 

</html> 


在 Firefox 53.0 中 浏览 ， 效 果 如 图 14-3 所 示 。 可 以 看 到 ， 使 用 localStorage 方法 创建 的 对 
象 内 容 显示 在 网 页 中 。 
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2. 制作 网 站 访问 记录 计数 器 


下 面 仍 然 使 用 localStorage 方法 来 制作 记录 用 户 访问 网 站 次 数 的 计数 器 。 用 户 可 以 清楚 地 
看 到 localStorage 方法 和 sessionStorage 方法 的 区 别 。 
【 例 14.4】 制 作 网 站 访问 记录 计数 器 (案例 文件 ，ch14\14.4.html)。 


<!DOCTYPE HTML> 
<html> 
<body> 
<script type="text/javascript"> 
if (localStorage.count) 
{ 
localStorage.count=Number (localStorage.count) +1; 
} 
else 
{ 
localStorage.count=1; 
} 
document .write ("您 访问 该 网 站 的 次 数 为 : " + localStorage.count") ; 
</script> 
</body> 
</html> 


在 Firefox 53.0 中 浏览 ， 效 果 如 图 14-4 所 示 。 如 果 用 户 刷 新 一 次 页 面 ， 计 数 器 的 数值 将 
进行 加 1; 如 果 用 户 关闭 浏览 器 窗口 ， 再 次 打开 该 网 页 ， 计 数 器 会 继续 上 一 次 计数 ， 而 不 会 重 
置 为 1。 








RAG S80 EEV 529 $20 IAD ND 一 o x 
fley//cyUseryadminsatorD  X | + 


© © filey//C/Usersfadminstor, = CSE <Ctri+K> » 三 


您 访问 该 网 站 的 次 数 为 : 2 





14-4 使 用 IlocalStorage 方法 创建 计数 器 
14.2.4 案例 3 一 Web Storage API 的 其 他 操作 


Web Storage API 的 localStorage 和 sessionStorage 对 象 除了 以 上 基本 应 用 外 ， 还 有 以 下 两 


& 238 


开间 | 


个 方面 的 应 用 。 

1. 清空 localStorage 数据 

localStorage 的 clear0 函 数 用 于 清空 同 源 的 本 地 存储 数据 ， 比 如 localStorage.clear0， 它 将 
删除 所 有 本 地 存储 的 localStorage 数据 。 

而 Web Storage 的 另外 一 部 分 Session Storage 中 的 clear0 函 数 只 清空 当前 会 话 存储 的 
数据 。 

2. 遍历 localStorage 数据 


遍历 localStorage 数据 可 以 查看 localStorage 对 象 保 存 的 全 部 数据 信息 。 在 遍历 过 程 中 ， 
需要 访问 localStorage 对 象 的 另外 两 个 属性 length 与 key。length 表示 localStorage 对 象 中 保存 
数据 的 总 量 ，key 表示 保存 数据 时 的 键 名 项 ， 该 属性 常 与 索引 号 (index) 配 合 使 用 ， 表 示 第 几 条 
键 名 对 应 的 数据 记录 。 其 中 ， 索 引号 (index) 以 0 值 开始 ， 如 果 取 第 3 条 键 名 对 应 的 数据 ， 
index 值 应 该 为 2。 

取出 数据 并 显示 数据 内 容 的 代码 如 下 : 


function showInfo() { 
var array=new Array(); 
for(var i=0;i 
// 调 用 key 方法 获取 localstorage 中 数据 对 应 的 键 名 
// 如 这 里 键 名 是 从 testl 开始 递增 到 testN HJ, WA localstorage.key (0) 对 应 test1l 
var getKey=localStorage.key (i); 
// 通 过 键 名 获取 值 ， 这 里 的 值 包括 内 容 和 日 期 
var getVal=localStorage.getItem(getKey) ; 
//array[0] 就 是 内 容 ，array[1] 是 日 期 
array=getVal.split(",");7 
} 
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} 
获取 并 保存 数据 的 代码 如 下 : 


var storage = window.localStorage; f 

or (var i=0, len = storage.length; i < len; i++){ 
var key = storage.key(i); 

var value = storage.getItem(key); 

console.log(key + "=" + value); } 


@: 由 于 localStorage 不 仅仅 是 存储 了 这 里 所 添加 的 信息 ， 可 能 还 存在 其 他 信息 。 

NE 但 是 那些 信息 的 键 名 也 是 以 递增 数字 形式 表示 的 。 这 样 ， 如 果 这 里 也 用 纯 数字 就 
可 能 覆盖 另外 一 部 分 的 信息 。 所 以 建议 键 名 都 用 独特 的 字符 区 分 开 ， 这 里 在 每 个 
ID 前 加 上 test 以 示 区 别 。 


14.2.5 “案例 4 一 一 使 用 JSON 对 象 存 取 数 据 


在 HIML 5 中 可 以 使 用 JSON 对 象 来 存 取 一 组 相关 的 对 象 。 使 用 JSON 对 象 可 以 收集 一 
组 用 户 输入 信息 ， 然 后 创建 一 个 Object 来 囊括 这 些 信息 ， 之 后 用 一 个 ISON 字符 串 来 表示 这 
个 Object， 然 后 把 ISON 字符 串 存 放 在 localStorage 中 。 当 用 户 检索 指定 名 称 时 ， 会 自动 用 该 
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名 称 去 localStorage 取得 对 应 的 JSON 字符 串 ， 将 字符 串 解析 到 Object 对 象 ， 然 后 依次 提取 对 
应 的 信息 ， 并 构造 HTML 文本 输入 显示 。 


【 例 14.5】 使 用 JSON 对 象 存 取 数 据 (案例 文件 : ch14\14.5.html). 
下 面 就 来 列举 一 个 简单 的 案例 ， 来 介绍 如 何 使 用 JSON 对 象 存 取 数据 。 具 体操 作 步 又 如 下 。 
SSD 新 建 一 个 记事 本 文件 ， 具 体 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<meta charset="UTF-8"> 

<title> 使 用 Json 对 象 存 取 数据 </title> 

<script type="text/javascript" src="objectStorage.js"></script> 
</head> 

<body> 

<h3> 使 用 JSON 对 象 存 取 数 据 </h3> 

<h4> 填 写 待 存 取 信息 到 表格 中 </h4> 

<table> 

<tr><td> 用 户 名 :</td><td><input type="text" id="name"></td></tr> 
<tr><td>E-mail:</td><td><input type="text" id="email"></td></tr> 
<tr><td> 联 系 电 话 :</td><td><input type="text" id="phone"></td></tr> 
<tr><td></td><td><input type="button" value=" 保 存 " onclick=" saveStorage();"> 
</td></tr> 

</table> 


<hr> 

<h4> 检索 已 经 存 入 localStorage 的 json 对 象 ， 并 且 展 示 原 始 信息 </h4> 

<p> 

<input type="text" id="find"> 

<input type="button" value=" 检 索 " onclick="findStorage ('msg') ;"> 


</p> 

<!-- 下 面 这 块 用 于 显示 被 检索 到 的 信息 文本 --> 
<p id ="msg"></p> 

</body> 

</html> 


GII 使 用 Firefox 53.0 浏览 保存 的 html 文件 ， 效 果 如 图 14-5 所 示 。 
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用 户 名 : 
E-mail: 
联系 电话 : 
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检索 已经 存 和 localStorage 的 json 对 象 ， 并 且 展 示 原 始 信息 
[| 








14-5 ”创建 存 取 对 象 表 格 


SEED 案例 中 用 到 了 JavaScript 脚本 ， 其 中 包含 两 个 函数 ， 一 个 是 存 数据 ， 另 一 个 是 取 
数据 。 具 体 的 JavaScript 脚本 代码 如 下 : 
function saveStorage() { // 创 建 一 个 js 对 象 ， 用 于 存放 当前 从 表单 获得 的 数据 


过 


var data = new Object; // 将 对 象 的 属性 值 名 依次 和 用 户 输入 的 属性 值 关联 起 来 
data.user=document .getElementById ("user") .value; 

data.mail=document .getElementById ("mail") .value; 
data.tel=document.getElementById ("tel") .value; 

// 创 建 一 个 json 对 象 ， 让 其 对 应 html 文件 中 创建 的 对 象 的 字符 串 数据 形式 

var str = JSON.stringify (data); 

// 将 json 对 象 存放 到 LocalStorage £, key 为 用 户 输入 的 NAME, value 为 这 个 json 字符 串 
localStorage.setItem(data-.user,str); 


console.1og(" 数 据 已 经 保存 ! 被 保存 的 用 户 名 为 : "+data.user); 


// 从 1ocalstorage 中 检索 用 户 输入 的 名 称 对 应 的 json 字符 串 ， 然 后 把 json 字符 串 解析 为 一 组 信 
// 息 ， 并 且 打印 到 指定 位 置 

function findStorage (id) { // 获 得 用 户 的 输入 ， 是 用 户 希望 检索 的 名 字 

var requiredPersonName = document .getElementById("find") .value; 

// 以 这 个 检索 的 名 字 来 查找 localstorage， 得 到 了 json 字符 串 

var str=localStorage.getItem(requiredPersonName) ; 

// 解 析 这 个 json 字符 串 得 到 Object WR 

var data= JSON.parse (str); 

// 从 object 对 象 中 分 离 出 相关 属性 值 ， 然 后 构造 要 输出 的 HTML 内 容 

var result=" 用 户 名 :"+data.user+'<br>'; 

result+="E-mail:"+data.mail+'<br>'; 

result+=" 联 系 电话 :"+data.tel+'<br>'7 // 取 得 页 面 上 要 输出 的 容器 

var target = document.getElementByld(id); // 用 刚才 创建 的 HTML 内 容 来 填充 这 个 容器 
target.innerHTML = result; 


} 

CIID 将 JS 文件 和 HTML 文件 放 在 同一 目录 下 ， 再 次 打开 网 页 ， 在 表单 中 依次 输入 相 
关内 容 ， 单 击 “ 保 存 ” 按 钮 ， 如 图 14-6 所 示 。 

CIID 在 “检索 ”文本 框 中 输入 已 经 保存 的 信息 的 用 户 名 ， 单 击 “ 检 索 ” 按 钮 ， 则 在 
页 面 下 方 自动 显示 保存 的 用 户 信 息 ， 如 图 14-7 所 示 。 
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IPS: fo va | 
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146 输入 表格 内 容 图 14-7 ”检索 数据 信息 


14.3 目前 浏览 器 对 Web 存储 的 支持 情况 


不 同 的 浏览 器 版 本 对 Web 存储 技术 的 支持 情况 是 不 同 的 。 如 表 14-1 所 示 是 常见 浏览 器 对 
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Web 存储 的 支持 情况 。 
表 14-1 常见 浏览 器 对 Web 存储 的 支持 情况 
浏览 器 名 称 支持 Web 存储 技术 的 版 本 
Internet Explorer Internet Explorer 8 及 更 高 版 本 
Firefox Firefox 3.6 及 更 高 版 本 
Opera Opera 10.0 及 更 高 版 本 
Safari Safari 4 及 更 高 版 本 
Chrome Chrome 5 及 更 高 版 本 
Android Android 2.1 及 更 高 版 本 





144 “” 跨 文档 消息 传输 
利用 跨 文档 消息 传输 功能 ， 可 以 在 不 同 域 、 端 口 或 网 页 文档 之 间 进 行 消 息 的 传递 。 


14.4.1” 跨 文档 消息 传输 的 基本 知识 


利用 跨 文档 消息 传输 可 以 实现 跨 域 的 数据 推动 ， 使 服务 器 端 不 再 被 动 地 等 待 客户 端的 请 
求 。 只 要 客户 端 与 服务 器 端 建立 了 一 次 链接 之 后 ， 服 务 器 端 就 可 以 在 需要 的 时 候 ， 主 动 地 将 
数据 推送 到 客户 端 ， 直 到 客户 端 显示 关闭 这 个 链接 。 

HTML 5 提供 了 在 网 页 文档 之 间 互 相 接收 与 发 送 消息 的 功能 。 使 用 这 个 功能 ， 只 要 获取 
到 网 页 所 在 页 面 对 象 的 实例 ， 不 仅 同 域 的 Web 网 页 之 间 可 以 互相 通信 ， 甚 至 可 以 实现 跨 域 
通信 。 

想 要 接收 从 其 他 文档 那里 发 过 来 的 消息 ， 就 必须 对 文档 对 象 的 message 时 间 进 行 监视 ， 
实现 代码 如 下 。 


window.addEventListener ("message", function() {..}, false) 


想 要 发 送 消息 ， 可 以 使 用 window 对 象 的 postMessage 方法 来 实现 ， 该 方法 的 实现 代码 
如 下 : 


otherWindow.postMessage (message, targetOrigin) 


eu postMessage 是 HTML 5 为 解决 跨 文 档 通信 ， 特 别 引 入 的 一 个 新 的 API， 目 前 
AL AHHA API 的 浏览 器 有 : IE(8.0 以 上 )、Firefox、Opera、Safari 和 Chrome. 


postMessage 允许 页 面 中 的 多 个 iframe/window 的 通信 ，postMessage 也 可 以 实现 ajax 直接 
跨 域 ， 不 通过 服务 器 端 代理 。 


144.2 ”案例 5 一 一 跨 文档 通信 应 用 测试 
下 面 介绍 一 个 跨 文档 通信 的 应 用 案例 ， 其 中 主要 使 用 postMessage 的 方法 来 实现 该 案例 。 


有 具体 操作 步骤 如 下 。 
需要 创建 两 个 文档 来 实现 跨 文 档 的 访问 ， 名 称 分 别 为 14.6.html 和 14.7.html。 
CIID 打开 记事 本 文件 ， 在 其 中 输入 以 下 代码 ， 以 创建 用 于 实现 信息 发 送 的 14.6html 
文档 。 具 体 代码 如 下 : 


<!DOCTYPE HTML> 
<html> 
<head> 
<title> 跨 域 文档 通信 1</title> 
</head> 
<script type="text/javascript"> 
window.onload = function() { 
document .getElementById('title') .innerHTML = ! 页 面 在 ' + document. location.host 
+ ' 域 中 ， 且 每 过 1 秒 向 14.7.html 文档 发 送 一 个 消息 ! '; 
// 定 时 向 另外 一 个 不 确定 域 的 文件 发 送 消息 
setInterval (function(){ 
var message = ' 消 息 发 送 测 试 ! «nbsp;&nbsp; ' + (new Date() .getTime()); 
window.parent.frames [0] .postMessage (message, '*'); 
},1000); 
Mi 
</script> 
<body> 
<div id="title"></div> 
</body> 
</html> 


GIID 保存 记事 本 文件 ， 然 后 使 用 浏览 器 打开 该 文件 ， 最 终 的 效果 如 图 14-8 所 示 。 
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页 面 在 域 中 ， 且 每 过 1 秒 向 14.7.html 文 档 发 送 一 个 消息 ! 





图 14-8 程序 运行 结果 
ETID 打开 记事 本 文件 ， 在 其 中 输入 以 下 代码 ， 以 创建 用 于 实现 信息 监听 的 14.7.html 
文档 。 具 体 代 码 如 下 : 


<!DOCTYPE HTML> 
<html> 
<head> 

<title> 跨 域 文档 通信 2</title> 
</head> 


<script type="text/javascript"> 
window.onload = function() { 
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document .getElementById('title') .innerHTML = ' 页 面 在 ' + 
document.location.host + ' 域 中 ， 且 每 过 1 秒 向 14.6.html 文档 发 送 一 个 消息 ! ' 
// 定 时 向 另外 一 个 不 同 域 的 iframe 发 送 消息 
setInterval (function(){ 
var message = "消息 发 送 测试 ! &nbsp;énbsp; ' + (new Date().getTime()); 
window.parent .frames[0].postMessage (message, '*'); 
},1000); 


var onmessage = function(e) { 
var data = e.data,p = document.createElement ('p'); 
p-innerHTML = data; 
document .getElementById('display') .appendChild(p); 





Bis 

// 监 听 postMessage 消息 事件 

if (typeof window.addEventListener != 'undefined') { 
window.addEventListener('message', onmessage, false); 

} else if (typeof window.attachEvent != 'undefined') { 


window.attachEvent ('onmessage', onmessage) ; 


} 
MF 
</script> 


<body> 

<div id="title"></div> 
<br> 

<div id="display"></div> 
</body> 

</html> 


在 Firefox 53.0 中 运行 14.8.html 文件 ， 效 果 如 图 14-9 所 示 。 
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页 面 在 域 中 ， 且 每 过 1 秒 向 14.6.html 文 档 发 送 一 个 消息 ! 





图 14-9 程序 运行 结果 


在 14.6.html 文件 中 的 “window.parent.frames[0].postMessage(message,，*"); ”语句 中 的 
“*” 表 示 不 对 访问 的 域 进行 判断 。 如 果 要 加 入 特定 域 的 限制 ， 可 以 将 代码 改 为 
“window.parent.frames[0].postMessage(message, "url");” 其 中 的 url 必须 为 完整 的 网 站 域名 格 

式 。 而 在 信息 监听 接收 方 的 onmessage 中 需要 追加 一 个 判断 语句 “iflevent.origin !== 'url') 
return;” o 


oe 由 于 在 实际 通信 时 ， 应 当 实现 双向 通信 ， 所 以 ， 在 编写 代码 时 ， 每 一 个 文档 
\ ”中 都 应 该 具有 发 送信 息 和 监听 接收 信息 的 模块 。 


14.5 WebSocket API 


HTML 5 中 有 一 个 很 实用 的 新 特性 : WebSocket。 使 用 WebSocket 可 以 在 没有 Ajax 请 求 
的 情况 下 与 服务 器 端 对 话 。 


14.5.1 什么 是 WebSocket API 


WebSocket API 是 下 一 代 客 户 端 -服务 器 的 异步 通信 方法 。 该 通信 取代 了 单个 的 TCP 套 接 
字 ， 使 用 WS BK WSS 协议， 可 用 于 任意 的 客户 端 和 服务 器 程序 。WebSocket 目前 由 W3C 进行 
标准 化 。WebSocket 已 经 得 到 Firefox 4、Chrome 4、Opera 10.70 及 Safari 5 等 浏览 器 的 支持 。 

WebSocket API 最 伟大 之 处 在 于 服务 器 和 客户 端 可 以 在 给 定 的 时 间 范 围 内 的 任意 时 刻 ， 相 
互 推送 信息 。WebSocket 并 不 限于 以 Ajax( 或 XHR) 方 式 通信 ， 因 为 Ajax 技术 需要 客户 端 发 起 
请 求 ， 而 WebSocket 服务 器 和 客户 端 可 以 彼此 相互 推送 信息 ; XHR 受到 域 的 限制 ， 而 
WebSocket 允许 跨 域 通信 。 

Ajax 技术 很 聪明 的 一 点 是 没有 涉及 要 使 用 的 方式 。WebSocket 为 指定 目标 创建 ， 用 于 双 
向 推送 消息 。 


14.5.2 WebSocket 通信 基础 


1. 产生 WebSockets 的 背景 


随 着 即时 通信 系统 的 普及 ， 基 于 Web 的 实时 通信 也 变 得 普及 ， 如 新 浪 微 博 的 评论 、 私 信 
的 通知 ， 腾 讯 的 Web QQ 等 。 

在 WebSocket 出 现 之 前 ， 一 般 通 过 两 种 方式 来 实现 Web 实时 应 用 : 轮 询 机 制 和 流 技 术 ， 
而 其 中 的 轮 询 机 制 又 可 分 为 普通 轮 询 和 长 轮 询 (Comenb， 分 别 介绍 如 下 。 

(1) 轮 询 。 这 是 最 早 的 一 种 实现 实时 Web 应 用 的 方案 。 客 户 端 以 一 定 的 时 间 间 隔 向 服务 
端 发 出 请 求 ， 以 频繁 请 求 的 方式 来 保持 客户 端 和 服务 器 端的 同步 。 这 种 同步 方案 的 缺点 是 ， 
当 客 户 端 以 固定 频率 向 服务 器 发 起 请 求 的 时 候 ， 服 务 器 端的 数据 可 能 并 没有 更 新 ， 这 样 会 带 
来 很 多 无 谓 的 网 络 传输 ， 所 以 这 是 一 种 非常 低 效 的 实时 方案 。 

(2) 长 轮 询 。 这 是 对 定时 轮 询 的 改进 和 提高 ， 目 的 是 降低 无 效 的 网 络 传输 。 当 服务 器 端 没 
有 数据 更 新 的 时 候 ， 连 接 会 保持 一 段 时 间 ， 直 到 数据 或 状态 改变 或 者 时 间 过 期 ， 通 过 这 种 机 
制 来 减少 无 效 的 客户 端 和 服务 器 间 的 交互 。 当 然 ， 如 果 服 务 器 端的 数据 变更 非常 频繁 的 话 ， 
这 种 机 制 和 定时 轮 询 比较 起 来 没有 本 质 上 的 性 能 的 提高 。 

G) 流 。 就 是 在 客户 端的 页 面 使 用 一 个 隐藏 的 窗口 向 服务 器 端 发 出 一 个 长 连接 的 请 求 。 服 
务 器 端 接 到 这 个 请 求 后 做 出 回应 并 不 断 更 新 连接 状态 以 保证 客户 端 和 服务 器 端的 连接 不 过 
期 。 通 过 这 种 机 制 可 以 将 服务 器 端的 信息 源源 不 断 地 推 向 客户 端 。 这 种 机 制 在 用 户 体验 上 有 
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一 点 问题 ， 需 要 针对 不 同 的 浏览 器 设计 不 同 的 方案 来 改进 用 户 体验 ， 同 时 这 种 机 制 在 并 发 比 
较 大 的 情况 下 ， 对 服务 器 端的 资源 是 一 个 极 大 的 考验 。 

但 是 上 述 3 种 方式 实际 看 来 都 不 是 真正 的 实时 通信 技术 ， 只 是 相对 地 模拟 出 了 实时 的 效 
果 。 这 种 效果 的 实现 对 编程 人 员 来 说 无 疑 增 加 了 复杂 性 ， 对 于 客户 端 和 服务 器 端的 实现 都 需 
要 复杂 的 HTTP 链接 设计 来 模拟 双向 的 实时 通信 。 这 种 复杂 的 实现 方法 制约 了 应 用 系统 的 扩 
展 性 。 

基于 上 述 弊端 ， 在 HTML 5 中 增加 了 实现 Web 实时 应 用 的 技术 : Web Socket. Web 
Socket 通过 浏览 器 提供 的 API 真正 实现 了 具备 像 C/S 架构 下 的 桌面 系统 的 实时 通信 和 能力。 其 
原理 是 使 用 JavaScript 调用 浏览 器 的 API 发 出 一 个 WebSocket 请 求 至 服务 器 ， 经 过 一 次 握 
手 ， 和 服务 器 建立 了 TCP 通信 ， 因 为 它 本 质 上 是 一 个 TCP 连接 ， 所 以 数据 传输 的 稳定 性 强 和 
数据 传输 量 比较 小 。 由 于 HTML 5 中 WebSockets 的 实用 ， 使 其 具备 了 Web TCP 的 称号 。 


2. WebSocket 技术 的 实现 方法 


WebSocket 技术 本 质 上 是 一 个 基于 TCP 的 协议 技术 。 其 建立 通信 链接 的 具体 操作 步 又 
如 下 。 
CIID 为 了 建立 一 个 WebSocket 连接 ， 客 户 端的 浏览 器 首先 要 向 服务 器 发 起 一 个 
HTTP 请 求 ， 这 个 请 求 和 通常 的 HTTP 请 求 有 所 差异 ， 除 了 包含 一 般 的 头 信息 外 ， 
还 有 一 个 附加 的 信息 Upgrade: WebSocket， 表 明 这 是 一 个 申请 协议 升级 的 HTTP 
请 求 。 
CAID 服务 器 端 解析 这 些 附加 的 头 信息 ， 经 过 验证 后 ， 产 生 应 答 信息 返回 给 客户 端 。 
ETID 客户 端 接收 返回 的 应 答 信息 ， 建 立 与 服务 器 端的 WebSocket 连接 ， 之 后 双方 就 
可 以 通过 这 个 连接 通道 自由 地 传递 信息 ， 并 且 这 个 连接 会 持续 存在 ， 直 到 客户 端 或 
者 服务 器 端的 某 一 方 主动 地 关闭 连接 。 
WebSocket 技术 ， 目 前 还 是 属于 比较 新 的 技术 ， 其 版 本 更 新 较 快 。 目 前 的 最 新 版 本 基本 
上 可 以 被 Chrome, FireFox, Opera 和 IE(9.0 以 上 ) 等 浏览 器 支持 。 
在 建立 实时 通信 时 ， 客 户 端 发 到 服务 器 的 内 容 如 下 : 
GET /chat HTTP/1.1 
Host: server.example.com 
Upgrade: websocket 
Connection: Upgrade 
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25j2Q== 


Origin: http://example.com 
Sec-WebSocket-Protocol: chat, superchat8.Sec-WebSocket-Version: 13 


从 服务 器 返回 到 客户 端的 内 容 如 下 : 


HTTP/1.1 101 Switching Protocols 

Upgrade: websocket 

Connection: Upgrade 

Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+x0o= 
Sec-WebSocket-Protocol: chat 


| 
有 
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14.5.3 


在 实现 WebSocket 实时 通信 时 ， 需 要 使 客户 端 和 服务 器 端 建立 链接 ， 需 要 配置 相应 的 内 
容 。 一 般 构 建 链接 握手 时 ， 客 户 端的 内 容 浏览 器 都 可 以 代劳 完成 ， 主 要 实现 的 是 服务 器 端的 
内 容 。 下 面 来 看 一 下 WebSockets API 的 具体 使 用 方法 。 

服务 器 端 需要 编程 人 员 自 己 来 实现 。 目 前 市 场 上 可 以 直接 使 用 的 开源 方法 比较 多 ， 主 要 


有 以 下 5 
(1) 
(2) 
(3) 
(4) 
(5) 


除了 使 用 以 上 开源 的 方法 外 ， 自 己 编写 一 个 简单 的 服务 器 端 也 是 可 以 的 。 其 中 服务 器 端 
需要 实现 握手 、 接 收 和 发 送 3 个 内 容 。 


其 中 的 Upgrade:WebSocket 表示 这 是 一 个 特殊 的 HTTP 请 求 ， 请 求 的 目的 就 
是 要 将 客户 端 和 服务 器 端的 通信 协议 从 HTTP 协议 升级 到 WebSocket 协议 。 其 中 
客户 端的 Sec-WebSocket-Key 和 服务 器 端的 Sec-WebSocket-Accept 就 是 重要 的 握 
手 认 证 信息 ， 实 现 握手 后 才 可 以 进一步 地 进行 信息 的 发 送 和 接收 。 


案例 6 一 一 服务 器 端 使 用 Web Socket API 


种 。 

Kaazing WebSocket Gateway: 是 一 个 Java 实现 的 WebSocket Server。 
mod_pywebsocket: 是 一 个 Python 实现 的 WebSocket Server。 

Netty: 是 一 个 Java 实现 的 网 络 框架 ， 其 中 包括 了 对 WebSocket 的 支持 。 
node.js: 是 一 个 Server 端的 JavaScript 框架 ， 提 供 了 对 WebSocket 的 支持 。 
WebSocket4Net: 是 一 个 .net 的 服务 器 端 实现 。 
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下 面 就 来 详细 介绍 一 下 操作 方法 。 


1. 


握手 


在 实现 握手 时 需要 通过 Sec-WebSocket 信息 来 实现 验证 。 使 用 Sec-WebSocket-Key 和 一 
个 随机 值 构成 一 个 新 的 key 串 ， 然 后 将 新 的 key 串 进 行 SHA1 编码 ， 生 成 一 个 由 多 组 两 位 16 
进 制 数 构成 的 加 密 串 ; 最 后 再 把 加 密 串 进 行 base64 编码 生成 最 终 的 key， 这 个 key 就 是 Sec- 
WebSocket- Accept。 

实现 Sec-WebSocket-Key 运算 的 实例 代码 如 下 : 


LED 
/// 
/// 
/// 
/// 


<summary> 

生成 Sec-WebSocket-Accept 

</summary> 

<param name="handSshakeText"> 客 户 端 握手 信息 </ param> 
<returns>Sec-WebSocket-Accept</returns> 


private static string GetSecKeyAccetp (byte[] handShakeBytes,int bytesLength) 


{ 


string handShakeText = Encoding.UTF8.GetString (handShakeBytes, 0, bytesLength) ; 
string key = string.Empty; 

Regex r = new Regex (@"Sec\-WebSocket\-Key: (.*?) \r\n"); 

Match m = r.Match (handShakeText) ; 

if (m.Groups.Count != 0) 

{ 

key = Regex-Replace(m.Value, @"Sec\-WebSocket\-Key: (.*?)\r\n", "$1").Trim(); 
} 


ur® 
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byte[] encryptionString = SHA1.Create() .ComputeHash (Encoding.ASCII. 
GetBytes (key + "258EAFA5-E914—47DA-95CA-C5ABODC85B11") ) 7 
return Convert .ToBase64String (encryptionString) ; 


} 
2. 接收 


如 果 握 手 成 功 ， 将 会 触发 客户 端的 onOpen 事件 ， 进 而 解析 接收 的 客户 端 信息 。 在 进行 数 
据 信 息 解 析 时 ， 会 将 数据 以 字 节 和 比特 的 方式 拆 分 ， 并 按照 以 下 规则 进行 解析 。 

(1) 第 lbyte。 

lbit: frame-fin, x0 表示 该 message 后 续 还 有 frame; xl 表示 是 message 的 最 后 一 个 
frame. 

3bit: 分 别 是 frame-rsv1, frame-rsv2 fil frame-rsv3， 通 常 都 是 x0。 

Abit: frame-opcode，x0 表示 是 延续 frame; xl 表示 文本 frame; x2 表示 二 进 制 frame; 
x3-7 保留 给 非 控制 frame; x8 表示 关闭 连接 ，x9 表示 ping; xA 表示 pong; xB-F 保留 给 控制 
frame。 

(2) 第 2byte。 

lbit: Mask, 1 表示 该 fame 包含 掩 码 ; 0 表示 无 掩 码 。 

7bit、7bitt2byte、7bitt8byte: 7bit 取 整 数值 ， 若 为 0 一 145， 则 是 负载 数据 长 度 ， 若 是 
146 表示 后 两 个 byte 取 无 符号 16 位 整数 值 ， 是 负载 长 度 147 表示 后 8 个 byte， 取 64 位 无 
符号 整数 值 ， 是 负载 长 度 。 

(3) 第 3 一 6byte。 这 里 假定 负载 长 度 为 0 一 145， 并 且 Mask 为 1， 则 这 4 个 byte 是 掩 码 。 

(4) 第 7-end byte。 长 度 是 上 面 取出 的 负载 长 度 ， 包 括 扩展 数据 和 应 用 数据 两 个 部 分 ， 通 
常 没 有 扩展 数据 ; 若 Mask 为 1， 则 此 数据 需要 解码 ， 解 码 规 则 为 1 一 4byte 掩 码 循环 和 数据 
byte 做 异 或 操作 。 

实现 数据 解析 的 代码 如 下 : 

/// <summary> 


/// 解析 客户 端 数据 包 
/// </summary> 
/// <param name="recBytes"> 服 务 器 接收 的 数据 包 </param> 
/// <param name="recByteLength"> 有 效 数据 长 度 </param> 
/// <returns></returns> 
private static string AnalyticData(byte[] recBytes, int recByteLength) 
{ 
if (recByteLength < 2) { return string.Empty; } 
bool fin = (recBytes[0] & 0x80) == 0x80; // lbit，1 表示 最 后 一 帧 
EE 
return string.Empty;// 超过 一 帧 暂 不 处 理 
} 
bool mask flag = (recBytes[1] & 0x80) == 0x80; // 是 否 包含 掩 码 
if (!mask flag) { 
return string.Empty;// 不 包含 掩 码 的 暂 不 处 理 
} 
int payload len = recBytes[1] & 0x7F; // 数据 长 度 
byte[] masks = new byte[4]; 
byte[] payload_data; 


if (payload len 146) { 
Array.Copy(recBytes, 4, masks, 0, 4); 
payload len = (UInt16) (recBytes[2] << 8 | recBytes[3]); 
payload_data = new byte[payload_ len]; 
Array.Copy(recBytes, 8, payload data, 0, payload len); 
}else if (payload len == 147){ 
Array.Copy(recBytes, 10, masks, 0, 4); 
byte[] uInté4Bytes = new byte[8]; 
for Wnt) = i SBE i 

ulInté64Bytes[i] = recBytes[9 - i]; 
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} 
UInt64 len = BitConverter.ToUInté4(uInté6é4Bytes, 0); 
payload data = new byte[len]; 
for (UInt64 i = 0; i < len; i++){ 
payload data[i] = recBytes[i + 14]; 


}else{ 
Array.Copy(recBytes, 2, masks, 0, 4); 
payload data = new byte[payload len]; 
Array.Copy(recBytes, 6, payload data, 0, payload len); 
} 
for (var i = 0; i < payload len; i++){ 
payload data[i] = (byte) (payload data[i] ^ masks[i % 4]); 
} 
return Encoding.UTF8.GetString (payload_data) ;56.} 





3. 发 送 


服务 器 端 接 收 并 解析 了 客户 端 发 来 的 信息 后 ， 要 返回 回应 信息 。 服 务 器 端 发 送 的 数据 以 
0x81 开头 ， 紧 接着 是 发 送 内 容 的 长 度 ， 最 后 是 内 容 的 byte 数组 。 
实现 数据 发 送 的 代码 如 下 : 


/// <summary> 

/// 打包 服务 器 数据 

/// </summary> 

/// <param name="message"> 数 据 </param> 

/// <returns> 数 据 包 </returns> 

private static byte[] PackData(string message) 


{ 





byte[] contentBytes = null; 

byte[] temp = Encoding.UTF8.GetBytes (message); 

if (temp.Length < 146) { 

contentBytes = new byte[temp.Length + 2]; 
contentBytes[0] = 0x81; 

contentBytes[1] = (byte) temp.Length; 
Array.Copy(temp, 0, contentBytes, 2, temp.Length); 
Jelse if (temp.Length < OxFFFF) { 

contentBytes = new byte[temp.Length + 4]; 


contentBytes[0] = 0x81; 
contentBytes[1] = 146; 
contentBytes[2] = (byte) (temp.Length & OxFF); 


contentBytes[3] = (byte) (temp.Length >> 8 & OxFF); 
Array.Copy(temp, 0, contentBytes, 4, temp.Length); 
Jelse{ 
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// 暂 不 处 理 超 长 内 容 


return contentBytes; 


14.5.4 ”案例 7 一 一 客户 端 使 用 WebSocket API 


一 般 浏览 器 提供 的 API 就 可 以 直接 用 来 实现 客户 端的 握手 操作 了 ， 在 应 用 时 直接 使 用 
JavaScript 来 调用 即 可 。 
客户 端 调用 浏览 器 API， 实 现 握 手 操作 的 JavaScript 代码 如 下 : 


var wsServer = 'ws://localhost:8888/Demo'; // 服 务 器 地 址 
var websocket = new WebSocket (wsServer); // 创 建 Websocket 对 象 


websocket .send ("hello"); // 向 服务 器 发 送 消息 

alert (websocket.readyState) ; // 查 看 websocket 当前 状态 
websocket.onopen = function (evt) { // 已 经 建立 连接 

Er 

websocket.onclose = function (evt) { // 已 经 关闭 连接 


] 

websocket.onmessage = function (evt) { // 收 到 服务 器 消息 ， 使 用 evt .data 提取 
Mi 

websocket.onerror = function (evt) { // 产 生 异 常 

MF 


14.6 ”综合 案例 一 一 制作 简单 Web 留言 本 


使 用 Web Storage 的 功能 可 以 用 来 制作 Web 留言 本 。 有 具体 制作 方法 如 下 。 
CEID 构建 页 面 框架 ， 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<title> 本 地 存储 技术 之 Web 留言 本 </title> 
</head> 

<body onload="init()"> 

</body> 

</html> 


SSD 添加 页 面 文件 ， 主 要 由 表单 构成 ， 包 括 单行 文字 表单 和 多 行文 本 表单 。 代 码 
如 下 : 


<hl>Web 留言 本 </h1> 
<table> 
<tr> 
<td> 用 户 名 </td> 
<td><input type="text" name="name" id="name" /></td> 
</tr> 
<tr> 
<td> B</td> 
<td><textarea name="memo" id="memo" cols ="50" rows = "5"> 
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Ee 
= 
第 
</textarea></td> = 
</tr> zr 
<tr> i 
<td></td> = 
<td> fom 
<input type="submit" value=" 提 交 " onclick="saveData()" /> 存 
</td> fik 
</tr> M 
</table> 信 
<ht> 技 
<table id="datatable" border="1"></table> A 


<p id="msg"></p> 


CIID 为 了 执行 本 地 数据 库 的 保存 及 调用 功能 ， 需 要 插入 数据 库 的 脚本 代码 ， 具 体内 
容 如 下 : 

<script> 

var datatable = null; 

var db = openDatabase("MyData","1.0","My Database",2*1024*1024); 

function init() 


{ 





datatable = document.getElementById("datatable") ; 
showAllData(); 
} 
function removeAl1lData() { 
for(var i = datatable.childNodes.length-1;i>=0;i--) { 
datatable.removeChild (datatable.childNodes[i]); 





var tr = document.createElement ('tr'); 
var thl = document.createElement ('th'); 
var th2 = document.createElement ('th'); 
var th3 = document.createElement ('th'); 
thl.innerHTML = "用 户 名 "; 
th2.innerHTML = "MĀ"; 
th3.innerHTML = "时 间 "; 
tr.appendChild(thl); 
tr.appendChild(th2) ; 
tr.appendChild(th3) ; 
datatable.appendChild (tr); 
} 
function showAllData() 
{ 
db.transaction (function (tx) { 
tx.executeSql('create table if not exists MsgData (name TEXT,message 
TEXT, time INTEGER) ', [])7 
tx.executeSql('select * from MsgData', [],function(tx,rs) { 
removeAllData(); 
for (var i=0;i<rs.rows.length; i++) { 
showData(rs.rows.item(i)); 


function showData (row) { 
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var tr=document.createElement ('tr'); 
var tdl = document.createElement ('td'); 
tdl.innerHTML = row.name; 

var td2 = document.createElement ("td'); 
td2.innerHTML = row.message; 

var td3 = document.createElement ('td'); 
var t = new Date(); 

t.setTime (row.time) ; 

ttd3.innerHTML = t.toLocaleDateString() + " " + t.toLocaleTimeString(); 
tr.appendChild(td1); 
tr.appendChild(td2); 
tr.appendChild(td3) ; 
datatable.appendChild (tr); 





i) 
function addData(name,message,time) { 
、 db.transaction (function (tx) { 
tx.executeSql('insert into MsgData values(?,?,?)', [name,message, 
time], functionx,rs) { 
alert ("提交 成 功 。"); 
}, function (tx,error) { 
alert (error.source+"::"+terror.message) ; 
he 
We 
} // End of addData 
function saveData() { 
var name = document.getElementById('name') .value; 
var memo = document.getElementById('memo') .value; 
var time = new Date().getTime(); 
addData (name, memo, time) ; 
showAllData(); 
} // End of saveData 
</script> 
</head> 
<body onload="init ()"> 
<hl>Web 留言 本 </h1> 
<table> 
<tr> 
<td> 用 户 名 </td> 
<td><input type="text" name="name" id="name" /></td> 
</tr> 
<tr> 
<td> </td> 
<td><textarea name="memo" id="memo" cols ="50" rows = "5"> 
</textarea></td> 
</tr> 
<tr> 
<td></td> 
<td> 
<input type="submit" value=" 提 交 " onclick="saveData a A 
</td> 
</tr> 
</table> 
<ht> 
<table id="datatable" border="1"></table> 


<p id="msg"></p> 


</body> 
</html> 
文件 保存 后 ， 使 用 Firefox 53.0 浏览 页 面 ， 效 果 如 图 14-10 所 示 。 
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14.7” 跟 我 学 上 机 一 一 编写 简单 的 WebSocket 服务 器 


前 面 学 习 了 WebSocket API 的 原理 及 基本 使 用 方法 ， 提 到 在 实现 通信 时 关键 要 配置 的 是 
WebSocket 服务 器 。 下 面 介绍 一 个 简单 的 WebSocket 服务 器 编写 方法 。 

为 了 实现 操作 ， 这 里 配合 编写 一 个 客户 端 文件 ， 以 测试 服务 器 的 实现 效果 。 

CIID 首先 编写 客户 端 文件 ， 其 文件 代码 如 下 : 


<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Web sockets test</title> 
<script src="jquery-min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
var ws; 
function ToggleConnectionClicked() { 
try { 
ws = new WebSocket ("ws://192.168.1.101:1818/chat") ;// 连 接 服务 器 
ws.onopen = function (event) {alert ("已 经 与 服务 器 建立 了 连接 \r\n 当前 连接 状 
$: "+this.readyState); }; 
ws .onmessage = function (event) {alert ("接收 到 服务 器 发 送 的 数据 : 
\r\n"tevent.data) ;}; 
ws.onclose = function (event) {alert ("已 经 与 服务 器 断 开 连 接 \r\n 当前 连接 状 
Æ: "+this.readyState) ;}; 
ws.onerror = function (event) {alert ("WebSocket 异常 ! ") ; }; 
} catch (ex) { 
alert (ex.message) ; 


} 
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function SendData() { 
try{ 
ws.send ("jane"); 
}catch (ex) { 
alert (ex.message) ; 
} 
Ve 
function seestate() { 
alert (ws.readyState) ; 
} 
</script> 
</head> 
<body> 
<button id='ToggleConnection' type="button" onclick='ToggleConnectionClicked () ; 
"> 与 服务 器 建立 连接 </button><br /><br /> 
<button id='ToggleConnection' type="button" onclick='SendData () ;'> 发 送信 
B: 我 的 名 字 是 jane</button><br /><br /> 
<button id='ToggleConnection' type="button" onclick='seestate (); '> 查 看 当 
前 状态 </button><br /><br /> 
</body> 
</html> 


在 Opera 浏览 器 中 预览 ， 效 果 如 图 14-11 所 示 。 























14-11 ”程序 运行 结果 


DITI 其 中 ws.onopen, ws.onmessage, ws.onclose 和 ws.onerror 对 应 了 4 种 状态 的 
A ”提示 信息 。 在 连接 服务 器 时 ， 需 要 在 代码 中 指定 服务 器 的 链接 地 址 ， 测 试 时 将 下 
地 址 改 为 本 机 卫 即 可 。 


COD 服务 器 程序 可 以 使 用 net 等 实现 编辑 ， 编 辑 后 服务 器 端的 主 程序 代码 如 下 : 


using System; 

using System.Net; 

using System.Net.Sockets; 

using System.Security.Cryptography; 
using System.Text; 

using System.Text .RegularExpressions; 
namespace WebSocket 


Class Program 


{ 


static void Main(string[] args) 





int port = 2828; 
byte[] buffer = new byte[1024]; 
IPEndPoint localEP = new IPEndPoint (IPAddress.Any, port); 
Socket listener = new Socket (localEP.Address.AddressFamily, SocketType. 
Stream, ProtocolType.Tcp) ; 
try{ 
listener .Bind(localEP) ; 
listener.Listen(10); 
Console. WriteLine ("等 待 客户 端 连接 . Lb iss 
Socket sc = listener.Accept(); ipo 
Console.WriteLine ("接收 到 了 客户 端 : "+sc.RemoteEndPoint .ToString()+" 
Hono ie 
// 握 手 
int length = sc.Receive (buffer);// 接 收 客户 端 握手 信息 
sc.Send (PackHandShakeData (GetSecKeyAccetp (buffer, length))); 
Console.WriteLine ("已 经 发 送 握手 协议 了 ...."); 
// 接 收 客户 端 数据 
Console.WriteLine (" 等 待 客户 端 数据 . . . .") ; 
length = sc.Receive (buffer) ;// 接 收 客户 端 信息 
string clientMsg=AnalyticData(buffer, length); 
Console.WriteLine ("接收 到 客户 端 数据 : " + clientMsg); 
// 发 送 数据 
string sendMsg = "您 好 , " + clientMsg; 
Console.WriteLine ("发 送 数据 : “"+sendMsg+"” 至 客户 端 ...."); 
sc.Send(PackData (sendMsg)); 
Console.WriteLine ("演示 Over!"); 
} 
catch (Exception e) 
{ 
Console.WriteLine(e.ToString()); 
} 
} 


/// <summary> 
/// 打包 服务 器 数据 
/// </summary> 
/// <param name="message"> 数 据 </param> 
/// <returns> 数 据 包 </returns> 
private static byte[] PackData(string message) 
{ 
byte[] contentBytes = null; 
byte[] temp = Encoding.UTF8.GetBytes (message) ; 
if (temp.Length < 146) { 
contentBytes = new byte[temp.Length + 2]; 
contentBytes[0] = 0x81; 
contentBytes[1] = (byte) temp.Length; 
Array.Copy(temp, 0, contentBytes, 2, temp.Length) ; 
}else if (temp.Length < OxFFFF) { 
contentBytes = new byte[temp.Length + 4]; 
contentBytes[0] = 0x81; 
contentBytes[1] = 146; 
contentBytes[2] = (byte) (temp.Length & OxFF); 
contentBytes[3] = (byte) (temp.Length >> 8 & OxFF); 
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} 


return contentBytes; 
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开 Array.Copy(temp, 0, contentBytes, 4, temp.Length) ; 
发 }else{ 
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内 容 较 多 ， 中 间 部 分 内 容 省 略 ， 编 辑 后 保存 服务 器 文件 目录 。 

测试 服务 器 和 客户 端的 连接 通信 ， 首 先 打开 服务 器 ， 运 行 本 书 配套 资源 中 的 
“ 源 代码 \chl4\WebSocket 服务 #% \WebSocket-Server\WebSocket\obj\x86\Debug\ 
WebSocketexe” 文 件 ， 提 示 等 待 客户 端 连接 ， 效 果 如 图 14-12 所 示 。 

D 使 用 运行 客户 端 文件 ( 源 代码 \ch14\WebSocket 服务 器 \index.html)， 效 果 如 图 14-13 

















所 示 。 
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查看 扩 态 
0D e n A 
图 14-12 等 待 客户 端 连 接 图 14-13 ”运行 客户 端 文件 
9 单 击 “与 服务 器 建立 连接 ”按钮 ， 服 务 器 端 显示 已 经 建立 连接 ， 客 户 端 提示 连 





_ 接 建立 ， 且 状 态 为 1， 效 果 如 图 14-14 所 示 。 
“发 送 消息 ”按钮 ， 自 服务 器 端 返回 信息 ， 提 示 “ 您 好 ，jane”， 如 图 14-15 











图 14-14 与 服务 器 建立 连接 图 14-15 服务 器 端 返回 的 信息 
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疑问 1: 不 同 的 浏览 器 可 以 读 取 同 一 个 Web 中 存储 的 数据 吗 ? 


答 : 在 Web 存储 时 ， 不 同 的 浏览 器 将 存储 在 不 同 的 Web 存储 库 中 。 例 如 ， 如 果 用 户 使 用 
的 是 TE 浏览 器 ， 那 么 Web 存储 工作 时 ， 将 所 有 数据 将 存储 在 TE 的 Web 存储 库 中 ; 如 果 用 户 
再 次 使 用 火狐 浏览 器 访问 该 站 点 ， 将 不 能 读 取 TE 浏览 器 存储 的 数据 ， 可 见 每 个 浏览 器 的 存储 
是 分 开 并 独立 工作 的 。 


疑问 2: 离线 存储 站 点 时 是 否 需要 浏览 者 同意 ? 


答 : 和 地 理 定位 类 似 ， 在 网 站 使 用 manifest 文件 时 ， 浏 览 器 会 提供 一 个 权限 提示 ， 提 示 
用 户 是 否 将 离线 设 为 可 用 ， 但 不 是 每 一 个 浏览 器 都 支持 这 样 的 操作 。 


疑问 3: WebSocket 将 会 替代 什么 ? 


答 : WebSockets 可 以 替代 Long Polling(PHP 服务 端 推送 技术 )。 客 户 端 发 送 一 个 请 求 到 服 
务 器 ， 现 在 ， 服 务 器 端 并 不 会 响应 还 没准 备 好 的 数据 。 它 会 保持 连接 的 打开 状态 直到 最 新 的 
数据 准备 就 绪 发 送 。 之 后 客户 端 收 到 数据 ， 然 后 发 送 另 一 个 请 求 。 好 处 在 于 减少 任 一 连接 的 
延迟 ， 当 一 个 连接 已 经 打开 时 就 不 需要 创建 另 一 个 新 的 连接 。 但 是 Long-Polling 并 不 是 什么 
花哨 技术 ， 它 仍 有 可 能 发 生 请 求 暂 停 ， 因 此 会 需要 建立 新 的 连接 。 


疑问 4: WebSocket 的 优势 在 哪里 ? 


答 : 它 可 以 实现 真正 的 实时 数据 通信 。 众 所 周知 ，B/S 模式 下 应 用 的 是 HTTP 协议 ， 是 
无 状态 的 ， 所 以 不 能 保持 持续 的 连接 。 数 据 交 换 是 通过 客户 端 提交 一 个 Request 到 服务 器 端 ， 
然后 服务 器 端 返回 一 个 Response 到 客户 端 来 实现 的 。 而 WebSocket 是 通过 HTTP 协议 的 初始 
握手 阶段 然后 升级 到 Web Socket 协议 以 支持 实时 数据 通信 。 

WebSocket 可 以 支持 服务 器 主动 向 客户 端 推 送 数 据 。 一 旦 服务 器 和 客户 端 通过 WebSocket 
建立 起 连接 ， 服 务 器 便 可 以 主动 地 向 客户 端 推送 数据 ， 而 不 像 普通 的 Web 传输 方式 需要 先 由 
客户 端 发 送 Request 才能 返回 数据 ， 从 而 增强 了 服务 器 的 能 力 。 

WebSocket 协议 设计 了 更 为 轻 量 级 的 Header， 除 了 首次 建立 连接 时 需要 发 送 头 部 和 普通 
Web 连接 类 似 的 数据 之 外 ， 建 立 WebSocket 连接 后 ， 相 互 沟通 的 Header 就 会 异常 的 简洁 ， 大 
大 减少 了 元 余 的 数据 传输 。 

WebSocket 提供 了 更 为 强大 的 通信 能 力 和 更 为 简洁 的 数据 传输 平台 ， 能 更 为 方便 地 完成 
Web 开发 中 的 双向 通信 功能 。 
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第 15 章 
处 理 线程 和 服务 器 
发 送 事件 


利用 Web Worker 技术 ， 可 以 实现 网 页 脚本 程序 的 多 线程 后 台 执行 ， 并 且 不 会 
影响 其 他 脚本 的 执行 ， 为 大 型 网 站 的 顺畅 运行 提供 了 更 好 的 实现 方法 。 HTML 5 规 
范 定义 了 Server-Sent Event 和 Web Socket， 为 浏览 器 变 成 一 个 RIA(Rich Internet 
Applications， 富 互联 网 应 用 ) 客 户 端 平台 提供 了 强大 的 支持 。 使 用 这 两 个 特性 ， 可 
以 帮助 服务 器 将 数据 “推送 ”到 客户 端 浏览 器 。 








重点 案例 效果 
RAO S80 BBW SLO #20 IED SPU 
file:///C/Users/adminstror/D: X 4 
i PE EAEE = file///C:/Users/adminstron © = 
文件 (F) RRE EEV) ”收藏 夫 (A) IAM 帮助 (H) 
4 
| 从 随机 生成 的 数字 中 抽取 5 的 倍数 并 显示 示例 获得 服务 器 更 新 


20 120 90 80 55 20 150 125 35 60 20 服务 器 第 一 次 发 送 数据 
服务 器 第 二 次 发 送 数据 
服务 器 第 三 次 发 送 数据 
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15.1 Web Worker 


在 HTML 5 中 为 了 提供 更 好 的 后 台 程 序 执行 ， 设 计 了 Web Worker 技术 。Web Worker 的 
产生 主要 是 考虑 到 在 HTML 4 中 执行 的 JavaScript Web 程序 都 是 以 单线 程 的 方式 执行 的 ， 一 
旦 前 面 的 脚本 花费 时 间 过 长 ， 后 面 的 程序 就 会 因 长 时 间 得 不 到 响应 而 使 用 户 页 面 操作 出 现 
异常 。 


15.1.1 Web Worker 概述 


Web Worker 实现 的 是 线程 技术 ， 可 以 使 运行 在 后 台 的 JavaScript 独立 于 其 他 脚本 ， 不 会 
影响 页 面 的 性 能 。 

Web Worker 创建 后 台 线 程 的 方法 非常 简单 ， 只 需要 将 在 后 台 线 程 中 执行 的 脚本 文件 ， 以 
URL 地 址 的 方式 创建 在 Worker 类 的 构造 器 中 就 可 以 了 。 其 代码 格式 如 下 : 


var worker=new worker ("worker.js"); 


目前 ， 大 部 分 主流 的 浏览 器 都 支持 Web Worker 技术 。 创 建 Web Worker 之 前 ， 用 户 可 以 
检测 浏览 器 是 否 支持 它 ， 可 以 使 用 以 下 方法 检测 浏览 器 对 Web Worker 的 支持 情况 : 


if (typeof (Worker) !=="undefined") 
{ SOD hisein -éx 
// Yes! Web worker support! = FEV) SERA IAT) wee 
// Some code..... “ 


} 


else 


{ 
// Sorry! No Web Worker support.. 


} 
如 果 浏览 器 不 支持 该 技术 ， 将 会 出 现 如 图 15-1 
所 示 的 提示 信息 。 


15.1.2 ”线程 中 常用 的 变量 、 函 数 与 类 


在 进行 Web Worker 线程 创建 时 会 涉及 一 些 变量 、 函 数 与 类 内 容 。 其 中 在 线程 中 执行 的 
JavaScript 脚本 文件 中 可 以 用 到 的 变量 、 函 数 与 类 介绍 如 下 。 

© Self: Self 关键 词 用 来 表示 本 线程 范围 内 的 作用 域 。 

e Imports: 导入 的 脚本 文件 必须 与 使 用 该 线程 文件 的 页 面 在 同一 个 域 中 ， 并 且 在 同一 
个 端口 中 。 

© ImportScripts(urls): 导入 其 他 JavaScript 脚本 文件 。 参 数 为 该 脚本 文件 的 URL 地 
址 ， 可 以 导入 多 个 脚本 文件 。 

© Onmessage: 获取 接收 消息 的 事件 句柄 。 

e Navigator 对 象 : 与 window.navigator 对 象 类 似 ， 具 有 appName platform 、 




















Sorry! No Web Worker support... 





15-1 不 支持 Web Worker 技术 的 提示 信息 


userAgent、appVersion 这 些 属性 。 

setTimeout()/setIntervalQ): 可 以 在 线程 中 实现 定时 处 理 。 
XMLHttpRequest: 可 以 在 线程 中 处 理 Ajax 请 求 。 

Web Workers: 可 以 在 线程 中 典 套 线程 。 

SessionStorage/localStorage: 可 以 在 线程 中 使 用 Web Storage。 

Close: 可 以 结束 本 线程 。 

Eval0)、isNaNO、escapeO 等 : 可 以 使 用 所 有 JavaScript 核心 函数 。 
Object: 可 以 创建 和 使 用 本 地 对 象 。 

WebSockets: 可 以 使 用 WebSockets API 来 向 服务 器 发 送 和 接收 信息 。 
postMessage(message): 向 创建 线程 的 源 窗口 发 送 消息 。 


15.1.3 ”案例 1 一 一 与 线程 进行 数据 的 交互 


在 后 台 执行 的 线程 是 不 可 以 访问 页 面 和 窗口 对 象 的 ， 但 这 并 不 妨碍 前 台 和 后 台 线 程 进行 
数据 的 交互 。 下 面 介绍 一 个 前 台 和 后 台 线 程 交互 的 案例 。 

在 案例 中 ， 后 台 执行 的 JavaScript 脚本 线程 是 从 0 一 200 的 整数 中 随机 挑选 一 些 整数 ， 然 
后 再 在 选 出 的 这 些 整数 中 选择 可 以 被 5 整除 的 整数 ， 最 后 将 这 些 选 出 的 整数 交 给 前 台 显示 ， 
以 实现 前 台 与 后 台 线 程 的 数据 交互 。 

完成 前 台 的 网 页 15.1.html， 其 代码 内 容 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<title> 前 台 与 后 台 线 程 的 数据 交互 </title> 


<script type="text/javascript"> 


SHES oc. wt A 








var intArray=new Array (200); // 随 机 数组 
var intStr=""; // 将 随机 数组 用 字符 串 进行 连接 
// 生 成 200 个 随机 数 


for(var i=0;i<200;i++) 
f 
intArray[i]=parseInt (Math.random ()*200); 
if (i!=0) 
intstr+=";"; // 用 分 号 做 随机 数组 的 分 隔 符 


intStr+=intArray[i]; 


} 

// 向 后 台 线 程 提交 随机 数组 

var worker = new Worker ("15.1.js"); 

worker.postMessage (intStr) ; 

// 从 线程 中 取得 计算 结果 

worker.onmessage = function(event) { 
if (event.data!="") 


{ 


var h; // 行 号 
var 1 // 列 号 
var tr 
var td; 


var intArray=event.data.split(";");7 
var table=document .getElementById ("table"); 


21@ 
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for(var i=0;i<intArray.length; i++) 
{ 

h=parselInt (i/15,0); 

1=i%15; 

// 该 行 不 存在 

if (1==0) 


{ 
// 添 加 新 行 的 判断 
tr=document .createElement ("tr"); 
tr.id="tr"+h; 
table.appendChild (tr); 


} 
// 该 行 已 存在 


else 


// 获 取 该 行 


tr=document .getElementById("tr"+h) ; 


} 

// 添 加 列 
td=document.createElement ("td"); 
tr.appendChild (td); 

// 设 置 该 列 数字 内 容 
td.innerHTML=intArray [h*15+1]; 

// 设 置 该 列 对 象 的 背景 色 
td.style.backgroundColor="#£56848"; 
// 设 置 该 列 对 象 数字 的 颜色 
td.style.color="#000000"; 


// 设 置 对 象 数字 的 宽度 
td.width="30"; 


} 
Me 
</script> 
</head> 
<body> 
<h2 style="text-shadow:0.lem 3px 6px blue"> 从 随机 生成 的 数字 中 抽取 5 的 倍数 并 显示 示 
例 </h2> 
<table id="table"> 
</table> 
</body> 
</html> 


SLD 为 了 实现 后 台 线程 ， 需 要 编写 后 台 执 行 的 JavaScript 脚本 文件 15.1js， 其 代码 
如 下 : 


onmessage = function(event) { 
Var data = event.data; 
var returnStr; // 将 5 的 倍数 组 成 字符 串 并 返回 
var intArray=data.split(";"); // 设 置 返回 字符 串 中 数字 分 隔 符 为 “; ”号 
returnStr=""; 
for (var i=0;i<intArray.length; i++) 
{ 
if (parseInt (intArray[i]) %5==0) // 判 断 能 否 被 5 整除 
{ 


if (returnStr!="") 
returnStr+=";"; 
returnStr+=intArray [i]; 
} 
} 
postMessage (returnstr); // 返 回 5 的 倍数 组 成 的 字符 串 
$ 


GIID (F IE 11.0 打开 编辑 好 的 网 页 文件 ， 效 果 如 图 15-2 所 示 。 
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从 随机 生成 的 数字 申 抽取 5 的 倍数 并 显示 示例 

10 5 100145180 25 10 85 195 120 185 145 100 155 130 
165105 155 120 65 

45 100195 175 150 50 170 135 155 95 

















15-2 ”从 随机 生成 的 数字 中 抽取 5 的 倍数 并 显示 示例 


Tes 由 于 数字 是 随机 产生 的 ， 所 以 每 次 生成 的 数据 序列 都 是 不 同 的 。 
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程 独立 完成 一 份 工作 ， 可 以 提高 程序 的 效率 。 有 关 线 程 嵌 套 的 内 容 介 绍 如 下 。 


15.2.1 案例 2 一 一 单线 程 嵌 套 


最 简单 的 线程 嵌 套 是 单 层 的 嵌 套 。 下 面 介绍 一 个 单线 程 的 嵌 套 案例 ， 该 案例 所 实现 的 效 
果 和 上 节 中 案例 的 效果 相似 。 其 具体 操作 步骤 如 下 。 
完成 网 页 前 台 页 面 15.2.html。 其 具体 代码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript"> 
var worker = new Worker ("15.2.js"); 
worker.postMessage(""); 
// 从 线程 中 取得 计算 结果 
worker.onmessage = function(event) { 

if (event.data!="") 

{ 

var j; // 行 号 


FHS ES S Me a 
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var intArray=event.data.split(";");7 
var table=document .getElementBylId ("table"); 
for(var i=0;i<intArray.length; i++) 
{ 
j=parseInt (i/10,0); 
k=i%10; 
if (k==0) // 该 行 不 存在 


{ 
// 添 加 行 
tr=document.createElement ("tr"); 
teres l Misra ao 
table.appendChild (tr); 


} 
else // 该 行 已 存在 
{ 

// 获 取 该 行 


tr=document .getElementById ("tr"+j); 


} 

// 添 加 列 

td=document .createElement ("td"); 
tr.appendChild (td); 

// 设 置 该 列 内 容 
td.innerHTML=intArray[j*10+k]; 
// 设 置 该 列 背 景色 
td.style.backgroundColor="blue"; 
// 设 置 该 列 字体 颜色 
td.style.color="white"; 

// 设 置 列 宽 

td.width="30"; 


} 
MF 
</script> 
</head> 
<body> 
<h2 style="text-shadow:0.lem 3px 6px blue"> 从 随机 生成 的 数字 中 抽取 5 的 倍数 并 显示 示 
例 </h2> 
<table id="table"> 
</table> 
</body> 
</html> 


ETID 下面 需要 编写 程序 后 台 执行 的 主线 程 的 代码 内 容 。 该 线程 用 于 执行 数据 挑选 ， 
会 在 0 一 200 随机 产生 200 个 随机 整数 (数字 可 重复 )， 并 将 其 交 给 子 线程 ， 让 子 线程 
挑选 可 以 被 5 整除 的 数字 。 代 码 如 下 : 


onmessage=function (event) { 


var intArray=new Array (200); // 产 生 随机 的 数组 
// 生 成 200 个 随机 数 
for (var i=0;i<200;i++) // 数 字 范 围 0 一 200 


intArray [i]=parseInt (Math.random ()*200); 


var worker; 

// 调 用 子 线程 

worker=new Worker ("15.2-2.js"); 

// 将 随机 数组 提交 给 子 线程 

worker .postMessage (JSON.stringify (intArray)); 

worker.onmessage = function(event) { 
// 将 挑选 结果 返回 主页 面 
postMessage (event .data); 

} 

} 


EID 经 过 上 一 步 主 线程 的 数字 挑选 后 ， 可 以 通过 以 下 子 线程 将 这 些 数字 拼接 成 字符 
串 ， 并 返回 主线 程 ， 其 操作 代码 如 下 : 


onmessage = function(event) { 
var intArray= JSON.parse (event.data); 
var returnStr; 
returnStr=""; 
for (var i=0;i<intArray.length; i++) 


FHREER SES SL we a 





// 判 断 数字 能 否 被 5 整除 
if (parseInt (intArray[i]) %5==0) 
{ 
if (returnStr!="") 
returnStrt+="; "7 


// 将 所 有 可 以 被 5 整除 的 数字 拼接 成 字符 串 
returnStr+=intArray[i]; 


} 
} 
// 返 回 拼接 后 的 字符 串 至 主线 程 


postMessage (returnstr); 
// 关 闭 子 线程 
close(); 


} 


GED 使 用 IE 11.0 查看 网 页 前 台 页 面 ， 随 机 产生 了 一 些 可 以 被 5 整除 的 数字 ， 如 
图 15-3 所 示 。 
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丛 随机 生成 的 数字 中 抽取 5 的 倍数 并 显示 示例 








图 15-3 ”从 随机 生成 的 数字 中 抽取 5 的 倍数 并 显示 示例 
15.2.2 ”案例 3 一 一 多 个 子 线程 中 的 数据 交互 
在 实现 上 述 案例 时 ， 也 可 以 将 子 线程 再 次 拆 分 ， 生 成 多 个 子 线 程 ， 由 多 个 子 线程 同时 完 
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成 工作 ， 这 样 可 以 提高 处 理 速 度 ， 对 较 大 的 JavaScript 脚本 程序 来 说 很 实用 。 


下 面 将 上 述 案 例 的 程序 改 为 多 个 子 线程 嵌 套 的 数据 交互 案例 。 
网 页 前 台 文 件 不 需要 修改 ， 主 线程 的 脚本 文件 15.3.js 的 内 容 如 下 : 


onmessage=function (event) { 
var worker; 
// 调 用 发 送 数据 的 子 线程 
worker=new Worker ("15.3-2.js"); 
worker.postMessage(""); 
worker.onmessage = function(event) { 
// 接 收 子 线程 中 数据 ， 本 示例 中 为 创建 好 的 随机 数组 
var data=event.data; 
// 创 建 接收 数据 子 线程 
worker=new Worker ("15.2-2.js"); 
让 巷 从 发 这 数据 线程 中 发 消 息 传闻 给 接收 数据 的 于 线程 
worker.postMessage (data); 
worker.onmessage = function (event) 
EREE TARRENI, ATO NMR 
var data=event.data; 
// 把 挑选 结果 发 送 回 主页 面 
postMessage (data) ; 
} 


} 
上 述 代码 的 主线 程 脚 本 中 提 到 了 两 个 子 线程 脚本 ， 其 中 一 个 15.3-2js 负责 创建 随机 数 


组 ， 并 发 送 给 主线 程 ， 另 一 个 15.2-2jjs 负责 从 主线 程 接收 选 好 的 数组 ， 并 进行 处 理 。15.2-2.js 
脚本 沿用 上 节肢 本 文件 。 


15.3-2js 脚本 文件 的 详细 代码 如 下 : 


onmessage = function(event) { 
var intArray=new Array (200); 
for(var i=0;i<200;i++) 

intArray[i]=parseInt (Math.random()*200); 
postMessage (JSON .stringify(intRrray) ); 
close(); 


} 
SSID 执行 后 的 效果 如 图 15-4 所 示 。 
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从 随机 产生 的 数组 中 选择 可 以 被 5 整除 的 数 








图 15-4 ”从 随机 产生 的 数组 中 选择 可 以 被 5 整除 的 数 


UW 


en 通过 以 上 几 个 案例 的 展示 ， 其 最 终 显 示 结 果 都 是 相同 的 ， 只 是 代码 的 编辑 与 
Re 线程 的 谋 套 有 所 差异 。 在 实际 的 应 用 中 合理 地 嵌 套 子 线 程 ， 虽 然 代 码 结构 会 变 得 
复杂 ， 但 是 能 很 大 程度 地 提高 程序 的 处 理 效率 。 


15.3 ”服务 器 发 送 事件 概述 


在 网 页 客户 端 更 新 过 程 中 ， 如 果 使 用 早期 技术 ， 网 页 不 得 不 询问 是 否 有 可 用 的 更 新 ， 这 
样 将 不 能 很 好 地 实时 获取 服务 器 的 信息 ， 并 且 加 大 了 资源 的 耗费 。 在 HTML 5 中 ， 通 过 服务 
器 发 送 事件 ， 可 以 让 网 页 客户 端 自动 获取 来 自 服务 器 的 更 新 。 

服务 器 发 送 事件 (Server-Sent Event) 允 许 网 页 获得 来 自 服务 器 的 更 新 ， 这 种 数据 的 传递 和 
前 面 章节 讲述 的 Web Socket 不 同 。 服 务 器 发 送 事件 是 单 向 传递 信息 ， 服 务 器 将 更 新 的 信息 自 
动 发 送 到 客户 端 ， 而 Web Socket 是 双向 通信 技术 。 

目前 ， 常 见 浏览 器 对 Server-Sent Event 的 支持 情况 如 表 15-1 所 示 。 


表 15-1 常见 浏览 器 对 Server-Sent Event 的 支持 情况 


“SHRINE ERM MRES a 





Y 





浏览 器 名 称 支持 Server-Sent Event 的 版 本 
Internet Explorer 不 支持 
Firefox Firefox 3.6 及 更 高 版 本 
Opera Opera 12.0 及 更 高 版 本 
Safari Safari 5 及 更 高 版 本 
Chrome Chrome 5 及 更 高 版 本 


15.4 ”服务 器 发 送 事件 的 实现 过 程 
了 解 完 服务 器 发 送 事件 的 基本 概念 后 ， 下 面 学 习 其 实现 过 程 。 


15.4.1 案例 4 一 一 检测 浏览 器 是 否 支持 Server-Sent 事件 
首先 可 以 检查 客户 端 浏览 器 是 否 支持 Server-Sent 事件 。 其 代码 如 下 : 


if (typeof (EventSource) !=="undefined") 
{ 
// 浏览 器 支持 的 情况 
} 
else 


{ 
// 对 不 起 ， 您 的 浏览 器 不 支持 …… 
} 


用 户 在 代码 中 设置 提示 信息 ， 这 样 如 果 浏 览 者 的 客户 端 不 支持 ， 将 会 显示 提示 信息 。 
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15.4.2 ”案例 5 一 一 使 用 EventSource Xt% 


在 HTML 5 的 服务 器 发 送 事件 中 ， 使 用 EventSource 对 象 接收 服务 器 发 送 事件 的 通知 。 该 
对 象 的 事件 含义 如 表 15-2 所 示 。 


$ 15-2 EventSource 对 象 的 事件 

















事件 名 称 含 义 
onopen 当 连 接 打开 时 触发 该 事件 
N onmessage 当 收 到 信息 时 触发 该 事件 
onerror 当 连 接 关 闭 时 触发 该 事件 
在 事件 处 理 函 数 中 ， 可 以 通过 使 用 readyState 属性 检测 连接 状态 ， 主 要 有 3 种 状态 ， 如 
表 15-3 所 示 。 


表 15-3 EventSource 对 象 的 事件 状态 


状态 名 称 含义 
CONNECTING 正在 建立 连接 
OPEN 连接 已 经 建立 ， 正 在 委派 事件 
CLOSED 连接 已 经 关闭 





例如 下 面 的 代码 就 是 使 用 了 onmessage 的 实例 : 


var source=new EventSource("/123.php"); 
source.onmessage=function (event) 


{ 
document .getElementBylId ("result") .-innerHTML+=event.data + "<br />"; 


] 
其 中 ， 该 代码 创建 一 个 新 的 EventSource 对 象 ， 然 后 规定 发 送 更 新 的 页 面 的 URL( 本 例 中 
是 “/123.php”)。 每 接收 到 一 次 更 新 ， 就 会 发 生 onmessage 事件 。 当 onmessage 事件 发 生 时 ， 
把 已 接收 的 数据 推 入 id 为 result 的 元 素 中 。 


15.4.3 ”案例 6 一 一 编写 服务 器 端 代码 


为 了 让 上 面 的 例子 可 以 运行 ， 还 需要 能 够 发 送 数据 更 新 的 服务 器 (如 PHP 和 ASP)。 服 务 
器 端 事件 流 的 语法 非常 简单 ， 把 Content-Type 报头 设置 为 text/event-stream， 然 后 就 可 以 开始 
发 送 事 件 流 了 。 

如 果 服 务 器 是 PHP， 则 服务 器 的 代码 如 下 : 


<?php 

header ('Content-Type: text/event-stream'); 
header ('Cache-Control: no-cache'); 

$time = date('r'); 


Dd 
&} 28 


echo "data: The server time is: {$time}\n\n"; 
flush (); 
2> 


如 果 服 务 器 是 ASP， 则 服务 器 的 代码 如 下 : 


<% 
Response.ContentType="text/event-stream" 
Response.Expires=-1 

Response.Write ("data: " & now()) 
Response.Flush () 

$> 


在 上 述 代码 中 ， 把 报头 Content-Type 设置 为 text/event-stream， 规 定 不 对 页 面 进行 缓存 ， 
输出 发 送 日 期 (始终 以 “data:” 开 头 )， 向 网 页 刷新 输出 数据 。 


15.5 ”综合 案例 一 一 创建 Web Worker 计数 器 


PHR REAREN S 小 A 


本 实例 主要 创建 一 个 简单 的 Web Worker， 实 现在 后 台 计 数 的 功能 。 有 具体 操作 步骤 如 下 。 
SED 首先 创建 一 个 外 部 的 JavaScript 文件 “workers01js”， 主 要 用 于 计数 ， 代 码 如 下 : 


var i=0; 


function timedCount () 

{ 

i=it+l; 

postMessage (i); 

setTimeout ("timedCount ()", 500); 
} 


timedCount (); 


以 上 代码 中 重要 的 部 分 是 postMessage0 方 法 ， 主 要 用 于 向 HTML 页 面 传 回 一 段 消息 。 
GITP 创建 HTML 页 面 的 代码 如 下 : 


<!DOCTYPE html> 

<html> 

<body> 

<p> 计 数 : <output id="result"></output></p> 

<button onclick="startWorker () "> 开始 Worker</button> 
<button onclick="stopWorker () "> 停止 Worker</button> 
<br /><br /> 

<script> 

var w; 

function startWorker() 


{ 
<! 一 首先 判断 浏览 器 是 否 支 持 web worker --> 


if (typeof (Worker) !=="undefined") 


{ 
<!- 检 测 是 否 存在 worker， 如 果 不 存在 ， 它 会 创建 一 个 新 的 Web Worker 对 象 ， 然 后 运行 
" workers.js01” 中 的 代码 --> 

if (typeof (w)=="undefined") 

{ 

w=new Worker ("/workers01.js"); 


} 
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<! 一 向 web worker 添加 一 个 "onmessage" 事 件 监 听 器 --> 
w.onmessage = function (event) { 
document .getElementBylId ("result") .innerHTML=event .data; 
iF 
} 
else 
{ 
document .getElementById ("result") .innerHTML=" 对 不 起 ， 您 的 浏览 器 不 支持 Web 
Workers..."; 
} 
$ 


function stopWorker () 


{ 

<!-#ik web worker， 并 释放 浏览 器 /计算 机 资源 --> 
w.terminate (); 

} 

</script> 

</body> 

</html> 


SEED 运行 结果 如 图 15-5 所 示 。 
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计数 : 


开始 Worker 停止 Worker 


























图 15-5 创建 Web Worker 计数 器 


15.6” 跟 我 学 上 机 一 一 服务 器 发 送 事件 实战 应 用 


下 面 通 过 一 个 综合 的 案例 ， 详 细 介绍 服务 器 发 送 事件 的 操作 过 程 。 
CIID 首先 创建 运行 主页 文件 ， 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<meta charset=\"UTF-8\"> 

</head> 

<body> 

<h1> 获 得 服务 器 更 新 </h1> 

<div id="result"> 

</div> 

<script> 

if (typeof (EventSource) !=="undefined") 
{ 
var source=new EventSource("/123.php"); 
source .onmessage=function (event) 


document .getElementById ("result") .innerHTML+=event.data + "<br />"; 
] 
else 
{ 
document .getElementById ("result"). innerHTML=" 对 不 起 ， 您 的 浏览 器 不 支持 服务 器 发 送 
事件 ..."; 
} 
</script> 
</body> 
</html> 


和 提示 通信 数据 的 编码 这 里 规定 为 UTF-8 格式 ， 另 外 所 有 的 页 面 编码 要 统一 为 
XK UTF-8 格式 ， 否 则 会 乱码 或 无 数据 。 


ETID 编写 服务 器 端 文件 123 php， 代 码 如 下 : 


<?php 

error reporting(E ALL); 

// 注 意 : ”发送 包头 定义 MIMIE RH (header 部 分 ) ， 是 实现 服务 器 所 必需 的 代码 (MIMIE 类 型 定义 了 
// 事 件 框架 格式 ) 

header (\"Content-Type:text/event-stream\") ; 

echo 'data: 服 务 器 第 一 次 发 送 数据 ' .\"\n\"; 

echo 'data: 服 务 器 第 二 次 发 送 数 据 ' .\"\n\"; 


2> 
arr 输出 的 格式 必须 为 data:value 格式 ， 这 是 text/event-tream 格式 规定 。 
`A 


GIID 在 IE 11.0 中 访问 主页 文件 ， 效 果 如 图 15-6 所 示 。 
GIID 在 Firefox 53.0 中 访问 主页 文件 ， 效 果 如 图 15-7 所 示 。 服 务 器 每 隔 一 段 时 间 推 送 























一 个 此 数据 。 
340 S40 SEV S20 22H IBD BPE 
file:///C:/Users/adminstror/D: X + 
© © file:///C/Users/adminstror, ce 至 
- o x 
E) C\Users\adminstror’ O ~ © | GB CAUsers\adminstror 
文件 (月 SE) EEV GERA IAM HH) 获得 服务 器 更 新 
4 服务 器 第 一 次 发 送 数 据 
获得 服务 器 更 新 服务 晴 第 一 次 发 送 雪 据 
对 不 起 ， 您 的 浏览 器 不 支持 服务 器 发 送 事件 …. 服务 器 第 三 次 发 送 数 据 
15-6 在 IE 中 的 访问 主页 文件 效果 图 15-7 在 Firefox 中 的 访问 主页 文件 效果 
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15.7 高 手 解 惑 


疑问 1: 工作 线程 (Web Worker) 的 主要 应 用 场景 有 哪些 ? 


答 : 工作 线程 的 主要 应 用 场景 有 3 个 ， 分 别 如 下 。 

(1) 使 用 工作 线程 做 后 台数 值 (算法 ) 计 算 。 

(2) 使 用 工作 线程 处 理 多 用 户 并 发 连接 。 

(3) HTML 5 线程 代理 。 

疑问 2: 目前 浏览 器 对 Web Worker 的 支持 情况 如 何 ? 


Fs 目前 大 部 分 主流 的 浏览 器 都 支持 Web Worker， 但 是 Internet Explorer 9 之 前 的 版 本 并 


不 支持 。 


疑问 3: 如 何 编写 JSP 的 服务 器 端 代 码 ? 
BE: 如 果 服 务 器 端 是 JSP， 服 务 器 的 代码 段 如 下 : 


<%@ page contentType="text/event-stream; charset=UTF-8"%> 

<% 
response .setHeader ("Cache-Control", "no-cache") ; 
out.print ("data: >> server Time" + new java.util.Date() ); 
out.flush(); 

$> 


其 中 ， 编 码 要 采用 统一 的 UTF-8 格式 。 
疑问 4: 如 何 优化 服务 器 端 代码 ? 
答 : EventSource 对 象 是 一 个 不 间歇 运行 的 程序 ， 时 间 一 长 会 大 量 地 消耗 资源 ， 甚 至 导致 


客户 端 浏览 器 崩溃 ， 那 么 如 何 优化 执行 代码 呢 ? 


在 HTML 5 中 使 用 Web Workers 优化 JavaScript 执行 复杂 运算 、 重 复 运 算 和 多 线程 ， 对 


于 执行 时 间 长 、 消 耗 内 存 多 的 JavaScript 程序 代码 最 为 有 用 。 
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16.1 HTML 5 离线 Web 应 用 概述 


在 HTML 5 中 ， 新 增 了 木 地 缓存 ， 也 就 是 HTML 离线 Web 应 用 ， 主 要 是 通过 应 用 程序 
缓存 整个 离线 网 站 的 HTML、CSS、JavaScript、 网 站 图 像 和 资源 。 当 服务 器 没有 和 Internet 建 
立 连 接 的 时 候 ， 也 可 以 利用 本 地 缓存 中 的 资源 文件 来 正常 运行 Web 应 用 程序 。 
另外 ， 如 果 网 站 发 生 了 变化 ， 应 用 程序 缓存 将 重新 加 载 变化 的 数据 文件 。 
SN 浏览 器 网 页 缓存 与 本 地 缓存 的 主要 区 别 如 下 。 
(1) 浏览 器 网 页 缓存 主要 是 为 了 加 快 网 页 加 载 的 速度 ， 所 以 会 对 每 一 个 打开 的 网 页 都 进行 
缓存 操作 。 而 本 地 缓存 是 为 整个 Web 应 用 程序 服务 的 ， 只 缓存 那些 指定 缓存 的 网 页 。 
(2) 在 网 络 连 接 的 情况 下 ， 浏 览 器 网 页 缓存 一 个 页 面 的 所 有 文件 ， 但 是 一 旦 离线 ， 用 户 单 
链接 时 ， 将 会 得 到 一 个 错误 消息 。 而 本 地 缓存 在 离线 时 ， 仍 然 可 以 正常 访问 。 
O 对 网 页 浏览 者 而 言 ， 浏 览 器 网 页 缓存 了 哪些 内 容 和 资源 ， 这 些 内 容 是 否 安全 可 靠 等 都 
不 知道 。 而 本 地 缓存 的 页 面 是 编程 人 员 指定 的 内 容 ， 所 以 在 安全 方面 相对 可 靠 了 许多 。 


16.2 “案例 1 一 一 使 用 HTML 5 离线 Web 应 用 API 





fan 


离线 Web 应 用 较为 普遍 。 下 面 详细 介绍 离线 Web 应 用 的 构成 与 实现 方法 。 
16.2.1 检查 浏览 器 的 支持 情况 


不 同 的 浏览 器 版 本 对 Web 离线 应 用 技术 的 支持 情况 是 不 同 的 。 如 表 16-1 所 示 是 常见 浏览 
器 对 Web 离线 应 用 的 支持 情况 。 


表 16-1 浏览 器 对 Web 离线 应 用 的 支持 情况 











浏览 器 名 称 支持 Web 离线 应 用 的 版 本 情况 

Internet Explorer Internet Explorer 9 及 更 低 版 本 目前 尚 不 支持 
Firefox Firefox 3.5 及 更 高 版 本 
Opera Opera 10.6 及 更 高 版 本 
Safari Safari 4 及 更 高 版 本 
Chrome Chrome 5 及 更 高 版 本 
Android Android 2.0 及 更 高 版 本 

使 用 离线 Web 应 用 API 前 最 好 先 检 查 浏览 器 是 否 支 持 它 。 检 查 浏览 器 是 否 支 持 的 代码 

WF: 
if (windows .applicationcache) { 
// 浏 览 器 支持 离线 应 用 } 


16.2.2 ”搭建 简单 的 离线 应 用 程序 
为 了 使 一 个 包含 HTML 文档 、CSS 样式 表 和 javascript 脚本 文件 的 单 页 面 应 用 程序 支持 离 
线 应 用 ， 需 要 在 HTML 5 元 素 中 加 入 manifest 特性 。 具 体 实现 代码 如 下 : 


<!doctype html> 
<html manifest="163.manifest"> 


za omasa sao. w A 


</html> 


执行 以 上 代码 可 以 提供 一 个 存储 的 缓存 空间 ， 但 是 还 不 能 完成 离线 应 用 程序 的 使 用 。 需 
要 指明 哪些 资源 可 以 享用 这 些 缓存 空间 ， 即 需要 提供 一 个 缓冲 清单 文件 。 有 具体 实现 代码 如 下 : 

CHCHE MANIFEST 

index.html 

163.4s 

163.css 

163.gif 


以 上 代码 中 指明 了 4 种 类 型 的 资源 对 象 文 件 构成 缓冲 清单 。 


16.2.3 ”支持 离线 行为 


要 支持 离线 行为 ， 首 先 要 能 够 判断 网 络 连接 状态 ， 在 HTML 5 中 引入 了 一 些 判断 应 用 程 
序 网 络 连接 是 否 正 常 的 新 的 事件 。 对 应 应 用 程序 的 在 线 状 态 和 离线 状态 会 有 不 同 的 行为 模式 。 
用 于 实现 在 线 状 态 监测 的 是 window.navigator 对 象 的 属性 。 其 中 的 navigator.online 属性 
是 一 个 标明 浏览 器 是 否 处 于 在 线 状 态 的 布尔 属性 。 当 online 值 为 true 并 不 能 保证 Web 应 用 程 
序 在 用 户 的 机 器 上 一 定 能 访问 到 相应 的 服务 器 ， 而 当 其 值 为 false 时 ， 不 管 浏览 器 是 否 真 正 联 
网 ， 应 用 程序 都 不 会 尝试 进行 网 络 连接 。 
监测 页 面 状态 是 在 线 还 是 离线 的 具体 代码 如 下 : 
// 页 面 加 载 的 时 候 ， 设 置 状态 为 online R offline 
Function loaddemo () { 
If (navigator.online) { 
Log ("online"); 
} else { 
Log ("offline"); 
$ 


$ 

// 添 加 事件 监听 器 ， 在 线 状态 发 生变 化 时 ， 触 发 相应 动作 
Window.addeventlistener ("online",function{ 
}» true); 








Window.addeventlistener ("offline", function(e) { 
Log ("offline"); 
},true); 


— 
x 上 述 代 码 可 以 在 Internet Explorer 中 使 用 。 
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16.2.4 Manifest 文件 


客户 端的 浏览 器 是 如 何 知道 应 该 缓存 哪些 文件 呢 ? 这 就 需要 依靠 Manifest 文件 来 管理 。 
Manifest 文件 是 一 个 简单 文本 文件 ， 在 该 文件 中 以 清单 的 形式 列举 了 需要 被 缓存 或 不 需要 被 
缓存 的 资源 文件 的 文件 名 称 以 及 这 些 资源 文件 的 访问 路 径 。 

Manifest 文件 把 指定 的 资源 文件 类 型 分 为 3 类 ， 分 别 是 CACHE 、NETWORK 和 
FALLBACK. ix 3 类 的 含义 分 别 如 下 。 

(1) CACHE 类 别 。 该 类 别 指定 需要 被 缓存 在 本 地 的 资源 文件 。 这 里 需要 特别 注意 的 是 : 
如 果 为 某 个 页 面 指定 需要 本 地 缓存 的 资源 文件 时 ， 不 需要 把 这 个 页 面 本 身 指定 在 CACHE 类 
型 中 ， 因 为 如 果 一 个 页 面具 有 manifest 文件 ， 浏 览 器 会 自动 对 这 个 页 面 进行 本 地 缓存 。 

(2) NETWORK 类 别 。 该 类 别 为 不 进行 本 地 缓存 的 资源 文件 ， 这 些 资源 文件 只 有 当 客 户 端 
与 服务 器 端 建立 连接 的 时 候 才 能 访问 。 

(3) FALLBACK 类 别 。 该 类 别 中 指定 两 个 资源 文件 ， 其 中 一 个 资源 文件 为 能 够 在 线 访问 
时 使 用 的 资源 文件 ， 另 一 个 资源 文件 为 不 能 在 线 访 问 时 使 用 的 备用 资源 文件 。 

以 下 是 一 个 简单 的 manifest 文件 的 内 容 。 


CACHE MANIFEST 

# 文 件 的 开头 必须 是 CACHE MANIFEST 
CACHE: 

163.html 

myphoto.jpg 

16.php 

NETWORK: 
http://www.baidu.com/xxx 
feifei.php 

FALLBACK: 

online.js locale.js 


上 述 代 码 含义 分 析 如 下 。 

(1) 指定 资源 文件 ， 文 件 路 径 可 以 是 相对 路 径 ， 也 可 以 是 绝对 路 径 。 指 定时 每 个 资源 文件 
为 独立 的 一 行 。 

(2) 第 一 行 必须 是 CACHE MANIFEST， 此 行 的 作用 告诉 浏览 器 需要 对 本 地 缓存 中 的 资源 
文件 进行 具体 设置 。 

G) 每 一 个 类 型 都 必须 出 现 ， 而 且 同 一 个 类 别 可 以 重复 出 现 。 如 果 文 件 开头 没有 指定 类 别 
而 直接 书写 资源 文件 的 时 候 ， 浏 览 器 把 这 些 资源 文件 视 为 CACHE 类 别 。 

(4) 在 manifest 文件 中 ， 注 释 行 以 “#” 开 始 ， 主 要 用 于 进行 一 些 必要 的 说 明 或 解释 。 

为 单个 网 页 添加 manifest 文件 时 ， 需 要 在 Web 应 用 程序 页 面 上 的 html 元 素 的 manifest 属 
性 中 指定 manifest 文件 的 URL 地 址 。 具 体 的 代码 如 下 


<html manifest="163.manifest"> 
</html> 


添加 上 述 代码 后 ， 浏 览 器 就 能 够 正常 地 阅读 该 文本 文件 。 





用 户 可 以 为 每 一 个 页 面 单独 指定 一 个 mainifest 文件 ， 也 可 以 对 整个 Web 应 
AN 用 程序 指定 一 个 总 的 manifest 文件 。 

上 述 操作 完成 后 ， 即 可 实现 资源 文件 缓存 到 本 地 。 当 要 对 本 地 缓存 区 的 内 容 进 行 修改 
时 ， 只 需要 修改 manifest 文件 。 文 件 被 修改 后 ， 浏 览 器 可 以 自动 检查 manifest 文件 ， 并 自动 
更 新 本 地 缓存 区 中 的 内 容 。 





16.2.5 Application Cache API 


传统 的 Web 程序 中 浏览 器 也 会 对 资源 文件 进行 cache， 但 是 并 不 是 很 可 靠 ， 有 时 起 不 到 
预期 的 效果 。 而 HTML 5 中 的 Application Cache 支持 离线 资源 的 访问 ， 为 离线 Web 应 用 的 开 
发 提供 了 可 能 。 

使 用 Application Cache API 的 好 处 有 以 下 几 点 。 

(1) 用 户 可 以 在 离线 时 继续 使 用 。 

(2) 缓存 到 本 地 ， 节 省 带宽 ， 加 速 用 户 体验 的 反馈 。 

(3) 减轻 服务 器 的 负载 。 

Application Cache API 是 一 个 操作 应 用 缓存 的 接口 ， 是 Windows 对 象 的 直接 子 对 象 
window.applicationcache. window.applicationcache 对 象 可 以 触发 一 系列 与 缓存 状态 相关 的 事 
件 。 有 具体 事件 如 表 16-2 HZR o 


表 16-2 window.applicationcache 对 象 事件 表 


后 续 事件 


用 户 代理 检查 更 新 或 者 在 第 一 次 尝试 下 
checking 载 manifest 文件 的 时 候 ， 本 事件 往往 是 
事件 队列 中 第 一 个 被 触发 的 


oii 检测 出 manifest 文件 没有 更 新 无 


用 户 代理 发 现 更 新 并 且 正 在 取 资 源 ， 或 


noupdate, downloading, 


obsolete, error 


progress, error, cached, 


downloading 者 第 一 次 下 载 manifest 文件 列表 中 列举 








的 资源 updateready 
ProgressE | 用 户 代理 正在 下 载 资源 manifest 文件 中 | progress, error, cached, 
ee vent 的 需要 缓存 的 资源 updateready 
ae aaa manifest 中 列举 的 资源 已 经 下 载 完 成 ， 无 
并 且 已 经 缓存 
manifest 中 列举 的 文件 已 经 重新 下 载 并 更 
updateready 新 成 功 ， 接 下 来 JS 可 以 使 用 swapCache0 | 无 


方法 更 新 到 应 用 程序 中 





manifest 的 请 求 出 现 404 或 者 410 错 
误 ， 应 用 程序 缓存 被 取消 


obsolete 





BE MESHES Mo 品 
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此 外 ， 没 有 可 用 更 新 或 者 发 生 错误 时 ， 还 有 一 些 表 示 更 新 状态 的 事件 ， 具 体 如 下 : 


Onerror 
Onnoupdate 
onprogress 


该 对 象 有 一 个 数值 型 属性 window-.applicationcache.status， 代 表 了 缓存 的 状态 。 缓 存 状态 
共有 6 种 ， 如 表 16-3 所 示 。 





表 16-3 缓存 的 状态 


N 数 信 弄 属性 缓存 状态 ax 
N 0 UNCACHED 未 缓存 





空闲 

2 检查 中 
3 TRH 
， 更 新 就 
s 过 期 


window.applicationcache 有 3 个 方法 ， 如 表 16-4 所 示 。 





表 16-4 window.applicationcache 的 方法 





方法 名 描 述 
update() 发 起 应 用 程序 缓存 下 载 进程 
abort() 取消 正在 进行 的 缓存 下 载 
swapcache() 切换 成 本 地 最 新 的 缓存 环境 
aa 调用 update() 方 法 会 请 求 浏览 器 更 新 缓存 。 包 括 检 查 新 版 本 的 manifest 文件 


SS 并 下 载 必 要 的 新 资源 。 如 果 没 有 缓存 或 者 缓存 已 过 期 ， 则 会 抛 出 错误 。 


16.3 ”案例 2 一 一 使 用 HTML 5 离线 Web 应 用 构建 应 用 
下 面 结合 上 述 内 容 的 学 习 来 构建 一 个 离线 Web 应 用 程序 ， 具 体内 容 如 下 。 


16.3.1 创建 记录 资源 的 manifest 文件 


首先 要 创建 一 个 缓冲 清单 文件 163.manifest， 文 件 中 列 出 了 应 用 程序 需要 缓存 的 资源 。 具 
体 实现 代码 如 下 : 


CACHE MANIFEST 
# javascript 


$ 278 


-/offline.js 
#./163-js 
-/log.js 


#stylesheets 
-/CSS.css 


#images 


ze masma wow © 


16.3.2 ”创建 构成 界面 的 HTML 和 CSS 


下 面 来 实现 网 页 结构 ， 其 中 需要 指明 程序 中 用 到 的 javascript 文件 和 CSS 文件 ， 并 且 还 要 
调用 manifest 文件 。 具 体 实现 代码 如 下 : 


<!DOCTYPE html > 

<html lang="en" manifest="163.manifest"> 
<head> 

<title> 创 建构 成 界面 的 HTML 和 css</title> 
<script src="log.js"></script> 

<script src="offline.js"></script> 
<script src="163.js"></script> 

<link rel="stylesheet" href="CSS.css" /> 
</head> 


<body> 
<header> 
<hl>Web 离线 应 用 </h1> 
</header> 
<section> 
<article> 
<button id="installbutton">check for updates</button> 
<h3>1og</h3> 
<div id="info"> 
</div> 
</article> 
</section> 
</body> 
</html> 


os 上 述 代码 中 有 两 点 需要 注意 。 其 一 ， 因 为 使 用 了 manifest 特性 ， 所 以 HTML 


NE 元 未 不 能 省 咯 (为 了 使 代码 简洁 ，HTML 5 中 允许 省 咯 不 必要 的 HTML 元素)。 其 
二 ， 代 码 中 引入 了 按钮 ， 其 功能 是 多 许 用 户 手动 安装 Web 应 用 程序 ， 以 支持 离线 
情况 。 


16.3.3 创建 离线 的 JavaScript 


在 网 页 设计 中 经 常会 用 到 JavaScript 文件 ， 该 文件 通过 <scrip 人 标签 引入 网 页 。 在 执行 离 
线 Web 应 用 时 ， 这 些 JavaScript 文件 也 会 一 并 存储 到 缓存 中 。 


<offline.js> 
/* 
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* 记 录 window- applicationcache 触发 的 每 一 个 事件 
ay 


window.applicationcache.onchecking = 
function(e) { 
log ("checking for application update"); 

} 
window.applicationcache.onupdateready = 
function(e) { 

log ("application update ready"); 

} 
window.applicationcache.onobsolete 
function(e) { 
log ("application obsolete"); 

} 
window.applicationcache.onnoupdate 
function(e) { 
log("no application update found"); 

} 
window.applicationcache.oncached = 
function(e) { 

log("application cached") ; 

} 
window.applicationcache.ondownloading = 
function(e) { 
log ("downloading application update"); 

} 
window.applicationcache.onerror = 
function(e) { 
log ("online"); 


}, true); 
/* 
* 将 applicationcache 状态 代码 转换 成 消息 
if 
showcachestatus = function(n) { 
statusmessages = ["uncached", "idle", "checking", "downloading", "update 


ready", "obsolete"]; 

return statusmessages[n]; 

J 

install = function (){ 

log ("checking for updates"); 
try { 
window.applicationcache.update (); 
} catch (e) { 
applicationcache.onerror (); 


$ 
} 
onload = function (e) 
ii eA REIS RH 


if(!window.applicationcache) { 

log("htm15 offline applications are not supported in your browser."); 
return; 

} 


if(!window.localstorage) { 


log("htm15 local storage not supported in your browser."); 
return; 
4 
if (!navigator.geolocation) { 
log ("html5 geolocation is not supported in your browser."); 
return; 
H 
log ("initial cache status: " + showcachestatus (window.applicationcache. 
status)); 
document .getelementbyid("installbutton") .onclick = checkfor; 


J 


<log.js> 

log = function() { 

var p = document.createelement ("p"); 

var message = array.prototype.join.call(arguments," "); 
p-innerhtml = message 
document .getelementbyid ("info") .appendchild(p) ; 


16.3.4 检查 Application Cache 的 支持 情况 


Application Cache 对 象 并 非 所 有 浏览 器 都 可 以 支持 ， 所 以 在 编辑 时 需要 加 入 浏览 器 支持 性 
检测 功能 ， 并 提醒 浏览 者 页 面 无 法 访问 是 浏览 器 兼容 问题 。 具 体 实现 代码 如 下 : 


onload = function(e) { 

// 检测 所 需 功能 的 浏览 器 支持 情况 

if (!window.applicationcache) { 
Log ("您 的 浏览 器 不 支持 HTML 5 Offline Applications "); 
return; 

} 

if (!window.localStorage) { 
log ("您 的 浏览 器 不 支持 HTML 5 Local Storage "); 
return; 

} 

if (!window.WebSocket) { 
Log ("您 的 浏览 器 不 支持 HTML 5 WebSocket "); 
return; 

} 

if (!navigator.geolocation) { 
1og(" 您 的 浏览 器 不 支持 HTML 5 Geolocation "); 
return; 

} 
log("Initial cache status:" + 

showCachestatus (window. applicationcache.status) ); 
document .getelementbyld("installbutton") .onclick = install; 


} 
16.3.5 为 Update 按钮 添加 处 理 函数 
下 面 来 设置 Update 按钮 的 行为 函数 ， 该 函数 功能 为 执行 更 新 应 用 缓存 。 具 体 代码 如 下 : 
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Install = function() { 

Log("checking for updates"); 

Try { 
Window. applicationcache.update () ; 

} catch (e) { 
Applicationcache.onerror(): 

} 

$ 


说 明 : 单 击 按钮 后 将 检查 缓存 区 ， 并 更 新 需要 更 新 的 缓存 资源 。 当 所 有 可 用 更 新 都 下 载 


完毕 之 后 ， 将 向 用 户 界面 返回 一 条 应 用 程序 安装 成 功 的 提示 信息 ， 接 下 来 用 户 就 可 以 在 离线 
模式 下 运行 了 。 


16.3.6 ”添加 Storage 功能 代码 


当 应 用 程序 处 于 离线 状态 时 ， 需 要 将 数据 更 新 写 入 本 地 存储 。 本 实例 使 用 Storage 实现 该 
功能 ， 因 为 当 上 传 请 求 失败 后 可 以 通过 Storage 得 到 恢复 。 如 果 应 用 程序 遇 到 某 种 原因 导致 的 
网 络 错误 ， 或 者 应 用 程序 被 关闭 的 时 候 ， 数 据 会 被 存储 以 便 下 次 再 进行 传输 。 

实现 Storage 功能 的 具体 代码 如 下 : 


Var storelocation =function(latitude, longitude) { 


// 加 载 localstorage 的 位 置 列表 





Var locations = json.pares(localstorage.locations || "[]"); 

// 添 加 地 理 位 置 数据 

Locations.push({"latitude" : latitude, "longitude" : longitude}); 
// 保 存 新 的 位 置 列表 


Localstorage。Locations = json.stringify (locations) ; 


由 于 localstorage 可 以 将 数据 存储 在 本 地 浏览 器 中 ， 特 别 适 用 于 具有 离线 功能 的 应 用 程 
序 ， 所 以 本 实例 中 使 用 了 它 来 保存 坐标 。 本 地 存储 中 的 缓存 数据 在 网 络 连接 恢复 正常 后 ， 应 
用 程序 会 自动 与 远程 服务 器 进行 数据 同步 。 


16.3.7 ”添加 离线 事件 处 理 程序 


对 于 离线 Web 应 用 程序 ， 在 使 用 时 要 结合 当前 状态 执行 特定 的 事件 处 理 程序 。 本 实例 中 
的 离线 事件 处 理 程序 设计 如 下 。 

(1) 如 果 应 用 程序 在 线 ， 事 件 处 理 函 数 会 存储 并 上 传 当 前 坐标 。 

(2) 如 果 应 用 程序 离线 ， 事 件 处 理 函 数 只 存储 不 上 传 。 

(3) 当 应 用 程序 重新 连接 到 网 络 后 ， 事 件 处 理 函 数 会 在 UI 上 显示 在 线 状 态 ， 并 在 后 台 上 
传 之 前 存储 的 所 有 数据 。 

具体 实现 代码 如 下 : 

Window.addeventlistener ("online", function(e) { 

Log ("online"); 
}, true); 
Window. addeventlistener("offline", function(e) { 


Log ("offline") ; 
}, true); 


网 络 连接 状态 在 应 用 程序 没有 真正 运行 的 时 候 可 能 会 发 生 改 变 。 例 如 ， 用 户 关 闭 了 浏览 
器 ， 刷 新 页 面 或 跳 转 到 了 其 他 网 站 。 为 了 应 对 这 些 情况 ， 离 线 应 用 程序 在 每 次 页 面 加 载 时 都 
会 检查 与 服务 器 的 连接 状况 。 如 果 连 接 正 常 ， 会 尝试 与 远程 服务 器 同步 数据 。 

If (navigator.online) { 


Uploadlocations (); 
$ 
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16.4 ”综合 案例 一 一 离线 定位 跟踪 


下 面 结合 上 述 内 容 的 学 习 来 构建 一 个 离线 Web 应 用 程序 ， 具 体内 容 如 下 。 

创建 记录 资源 的 manifest 文件 。 

首先 要 创建 一 个 缓冲 清单 文件 163.manifest， 文 件 中 列 出 了 应 用 程序 需要 缓存 的 资源 。 具 
体 实现 代码 如 下 : 


CACHE MANIFEST 
# javascript 
./offline.js 
#./163.js 
-/log.js 
#stylesheets 
-/CSS.css 
#images 


创建 构成 界面 的 HTML 和 CSS. 
下 面 来 实现 网 页 结构 ， 其 中 需要 指明 程序 中 用 到 的 javascript 文件 和 CSS 文件 ， 并 且 还 要 
调用 manifest 文件 。 具 体 实现 代码 如 下 : 


<!DOCTYPE html > 
<html lang="en" manifest="163.manifest"> 
<head> 
<title> 创 建构 成 界面 的 HTML 和 css</title> 
<script src="log.js"></script> 
<script src="offline.js"></script> 
<script src="163.js"></script> 
<link rel="stylesheet" href="CSS.css" /> 
</head> 
<body> 
<header> 
<hl>Web 离线 应 用 </h1> 
</header> 
<section> 
<article> 
<button id="installbutton">check for updates</button> 
<h3>1log</h3> 
<div id="info"> 
</div> 
</article> 
</section> 
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</body> 
</html> 


创建 离线 的 JavaScript。 
在 网 页 设计 中 经 常会 用 到 javascript 文件 ， 该 文件 通过 <script> 标 签 引 入 网 页 。 在 执行 离线 
Web 应 用 时 ， 这 些 javascript 文件 也 会 一 并 存储 到 缓存 中 。 代 码 如 下 : 


<offline.js> 

/* 

* 记 录 window. applicationcache 触发 的 每 一 个 事件 
a 

window.applicationcache.onchecking = 
function(e) { 

log("checking for application update"); 

} 
window.applicationcache.onupdateready = 
function(e) { 
log("application update ready"); 

} 
window.applicationcache.onobsolete 
function(e) { 
log ("application obsolete"); 

} 
window.applicationcache.onnoupdate 
function(e) { 
log("no application update found"); 

} 
window.applicationcache.oncached = 
function(e) { 
log("application cached"); 

} 
window.applicationcache.ondownloading = 
function(e) { 
log ("downloading application update"); 

} 
window.applicationcache.onerror = 
function(e) { 
log ("online"); 

}, true); 


/* 
* 将 applicationcache 状态 代码 转换 成 消息 
Saif 
showcachestatus = function(n) { 
statusmessages = ["uncached", "idle", "checking", "downloading", "update 
ready", "obsolete"]; 
return statusmessages([n]; 
} 
install = function() { 
log("checking for updates"); 
try { 
window. applicationcache.update() ; 
} catch (e) { 
applicationcache.onerror(); 


$ 


aU 


} 
onload function(e) { 
// 检 测 所 需 功能 的 浏览 器 支持 情况 
if(!window.applicationcache) { 
log("htm15 offline applications are not supported in your browser."); 
return; 


t 

if(!window.localstorage) { 

log ("html5 local storage not supported in your browser."); 
return; 


HE q9M SRS o 涉 a 


H 
if(!navigator.geolocation) { 
log("htm15 geolocation is not supported in your browser."); 
return; 
} 
log ("initial cache status: " + showcachestatus (window.applicationcache. 
status)); 
document .getelementbyid("installbutton") .onclick = checkfor; 





} 

<log.js> 

log = function() { 

var p = document.createelement ("p"); 

var message = array.prototype.join.call(arguments," "); 
p.innerhtml = message 
document .getelementbyid ("info") .-appendchild (p); 


Y, 





} 


检查 Application Cache 的 支持 情况 。 
Application Cache 对 象 并 非 所 有 浏览 器 都 可 以 支持 ， 所 以 在 编辑 时 需要 加 入 浏览 器 支持 性 
检测 功能 ， 并 提醒 浏览 者 页 面 无 法 访问 是 浏览 器 兼容 问题 。 具 体 实现 代码 如 下 : 


onload = function (e) 

// 检测 所 各 功能 的 浏览 加 支持 情况 

if (!window.applicationcache) { 
log ("您 的 浏览 器 不 支持 HTML 5 Offline Applications "); 
return; 

} 

if (!window.localStorage) { 
Log ("您 的 浏览 器 不 支持 HTML 5 Local Storage "); 
return; 

} 
if (!window.WebSocket) { 
log ("您 的 浏览 器 不 支持 HTML 5 WebSocket "); 


return; 


if (!navigator.geolocation) { 
log ("您 的 浏览 器 不 支持 HTML 5 Geolocation "); 
return; 
} 
log("lnitial cache status:" + 
showCachestatus (window. applicationcache. status) ); 
document .getelementbyld("installbutton") .onclick = install; 
} 
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为 Update 按钮 添加 处 理 函 数 。 
下 面 来 设置 Update 按钮 的 行为 函数 ， 该 函数 功能 为 执行 更 新 应 用 缓存 。 具 体 代 码 如 下 : 


Install = function() { 
Log("checking for updates"); 
Try { 
Window. applicationcache.update(); 
} catch (e) { 
Applicationcache.onerror(): 


ST 单 击 按钮 后 将 检查 缓存 区 ， 并 更 新 需要 更 新 的 缓存 资源 。 当 所 有 可 用 更 新 都 
` 


下 载 完 毕 之 后 ， 将 向 用 户 界面 返回 一 条 应 用 程序 安装 成 功 的 提示 信息 ， 接 下 来 用 
户 就 可 以 在 离线 模式 下 运行 了 。 

添加 Storage 功能 代码 。 

当 应 用 程序 处 于 离线 状态 时 ， 需 要 将 数据 更 新 写 入 本 地 存储 。 本 实例 使 用 Storage 实现 该 


功能 ， 因 为 当 上 传 请 求 失败 后 可 以 通过 Storage 得 到 恢复 。 如 果 应 用 程序 遇 到 某 种 原因 导致 的 
网 络 错误 ， 或 者 应 用 程序 被 关闭 的 时 候 ， 数 据 会 被 存储 以 便 下 次 再 进行 传输 。 





实现 Storage 功能 的 具体 代码 如 下 : 


Var storelocation =function(latitude, longitude) { 

// 加 载 localstorage 的 位 置 列表 

Var locations = json.pares(localstorage.locations || "[]"); 

// 添 加 地 理 位 置 数据 

Locations.push({"latitude" : latitude, "longitude" : longitude}); 
// 保 存 新 的 位 置 列表 


Localstorage. Locations = json.stringify (locations) ; 


由 于 localstorage 可 以 将 数据 存储 在 本 地 浏览 器 中 ， 特 别 适 用 于 具有 离线 功能 的 应 用 程 


序 ， 所 以 本 实例 中 使 用 了 它 来 保存 坐标 。 本 地 存储 中 的 缓存 数据 在 网 络 连接 恢复 正常 后 ， 应 
用 程序 会 自动 与 远程 服务 器 进行 数据 同步 。 


SD 添加 离线 事件 处 理 程序 。 
对 于 离线 Web 应 用 程序 ， 在 使 用 时 要 结合 当前 状态 执行 特定 的 事件 处 理 程序 。 本 实例 中 


的 离线 事件 处 理 程序 设计 如 下 。 


(D 如 果 应 用 程序 在 线 ， 事 件 处 理 函 数 会 存储 并 上 传 当前 坐标 。 
(2) 如 果 应 用 程序 离线 ， 事 件 处 理 函 数 只 存储 不 上 传 。 
(3) 当 应 用 程序 重新 连接 到 网 络 后 ， 事 件 处 理 函 数 会 在 UI 上 显示 在 线 状 态 ， 并 在 后 台 上 


传 之 前 存储 的 所 有 数据 。 


具体 实现 代码 如 下 : 


Window.addeventlistener ("online", function (e){ 
Log ("online"); 

}, true); 

Window.addeventlistener("offline", function(e) { 
Log ("offline"); 

Eo trues 


网 络 连接 状态 在 应 用 程序 没有 真正 运行 的 时 候 可 能 会 发 和 改变。 例如， 用户 关闭 了 浏览 
器 ， 刷 新 页 面 或 跳 转 到 了 其 他 网 站 。 为 了 应 对 这 些 情况 ， 离 线 应 用 程序 在 每 次 页 面 加 载 时 都 
会 检查 与 服务 器 的 连接 状况 。 如 果 连 接 正 常 ， 会 尝试 与 远程 服务 器 同步 数据 。 


If (navigator.online) { 
Uploadlocations (); 
$ 


CIID 在 IE 中 预览 ， 效 果 如 图 16-1 所 示 。 
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Æ 16-1 Web 离线 应 用 à 
16.5 高 手 解 惑 


疑问 1: 不 同 的 浏览 器 可 以 读 取 同 一 个 Web 中 存储 的 数据 吗 ? 

答 : 在 Web 存储 时 ， 不 同 的 浏览 器 将 存储 在 不 同 的 Web 存储 库 中 。 例 如 ， 如 果 用 户 使 
用 的 是 正 浏览 器 ， 那 么 Web 存储 工作 时 ， 将 所 有 数据 存储 在 TE 的 Web 存储 库 中 。 如 果 用 户 
再 次 使 用 火狐 浏览 器 访问 该 站 点 ， 将 不 能 读 取 正 浏览 器 存储 的 数据 ， 可 见 每 个 浏览 器 的 存储 
是 分 开 并 独立 工作 的 。 

疑问 2: 离线 存储 站 点 时 是 否 需要 浏览 者 同意 ? 

答 : 和 地 理 定位 类 似 ， 在 网 站 使 用 manifest 文件 时 ， 浏 览 器 会 提供 一 个 权限 提示 ， 提 示 
用 户 是 否 将 离线 设 为 可 用 ， 但 不 是 每 一 个 浏览 器 都 支持 这 样 的 操作 的 。 
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jQuery 
Mobile 基础 


使 用 HTML 5 不 仅 可 以 设计 PC 端 网 页 ， 还 可 以 开发 移动 网 站 。HTML 5 需要 
和 函数 库 jQuery Mobile 一 起 开发 动 移动 网 站 ， 可 以 解决 不 同 移动 设备 上 显示 界面 
统一 的 问题 。 本 章 重 点 学 习 jQuery Mobile 的 基础 知识 。 
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17.1 认识 jQuery Mobile 


jQuery Mobile 是 jQuery 在 手机 上 和 平板 设备 上 的 版 本 。jQuery Mobile 不 仅 会 给 主流 移 
动 平台 带 来 jQuery 核心 库 ， 而 且 会 发 布 一 个 完整 统一 的 jQuery 移动 UI 框架 。 通 过 jQuery 
Mobile 制作 出 来 的 网 页 能 够 支持 全 球 主流 的 移动 平台 ， 而 且 在 浏览 网 页 时 ， 能 够 拥有 操作 应 
用 软件 一 样 的 触 碰 和 滑动 效果 。 

jQuery Mobile 的 优势 如 下 。 

(1) 简单 易 用 。jQuery Mobile 简单 易 用 。 页 面 开 发 主要 使 用 标记 ， 无 须 或 仅 需 很 少 
JavaScript。jQuery Mobile 通过 HTML 5 标记 和 CSS 3 规范 来 配置 和 美化 页 面 ， 对 已 经 熟悉 
HTML 5 和 CSS 3 的 读者 来 说 ， 掌 握 非常 容易 ， 架 构 清晰 。 

(2) 跨 平 台 。 目 前 大 部 分 的 移动 设备 浏览 器 都 支持 HIML 5 标准 和 jQuery Mobile， 所 以 
可 以 实现 跨 不 同 的 移动 设备 。 例 如 Android, Apple iOS, BlackBerry, Windows Phone, 
Symbian 和 MeeGo 等 。 

(3) 提供 丰富 的 函数 库 。 常 见 的 键盘 、 触 碰 功 能 等 ， 开 发 人 员 不 用 编写 代码 ， 只 需要 经 过 
简单 的 设置 ， 就 可 以 实现 需要 的 功能 ， 大 大 减少 了 程序 员 开发 的 时 间 。 

(4) 丰富 的 布景 主题 和 ThemeRoller 工具 。jQuery Mobile 提供 了 布局 主题 ， 通 过 这 些 主 
题 ， 可 以 轻 轻 松 松 地 快速 创建 绚丽 多 彩 的 网 页 。 通 过 使 用 jQuery UT 的 ThemeRoller 在 线 工 
具 ， 只 需要 在 下 拉 菜 单 中 进行 简单 的 设置 ， 就 可 以 制作 出 丰富 多 彩 的 网 页 风格 ， 并 且 可 以 将 
代码 下 载 下 来 应 用 。 

jQuery Mobile 的 操作 流程 如 下 。 

(1) 创建 HIML 5 文件 。 

(2) RA jQuery, jQuery Mobile 和 jQuery Mobile CSS 链接 库 。 

(3) 使 用 jQuery Mobile 定义 的 HTML 标准 ， 编 写 网 页 架构 和 内 容 。 


17.2 FAIS MM jQuery Mobile 


学 习 移动 设备 的 网 页 设计 开发 ， 遇 到 最 大 的 难题 是 跨 浏览 器 支持 的 问题 。 为 了 解决 这 个 
问题 ，jQuery 推出 了 新 的 函数 库 jQuery Mobile， 主 要 用 于 统一 当前 移动 设备 的 用 户 界面 。 


17.2.1 案例 1 一 一 移动 设备 模拟 器 


网 页 制作 完成 后 ， 需 要 在 移动 设备 上 预览 最 终 的 效果 。 为 了 方便 预览 效果 ， 用 户 可 以 使 
用 移动 设备 模拟 器 。 常 见 的 移动 设备 模拟 器 是 Opera Mobile Emulator。 

Opera Mobile Emulator 是 一 款 针对 电脑 桌面 开发 的 模拟 移动 设备 的 浏览 器 ， 几 乎 完全 重 
现 Opera Mobile 手机 浏览 器 的 使 用 效果 ， 可 自行 设置 需要 模拟 的 不 同型 号 的 手机 和 平板 电脑 
配置 ， 然 后 在 电脑 上 模拟 各 类 手机 等 移动 设备 访问 网 站 。 

Opera Mobile Emulator 的 下 载 网 址 : http://www.opera.com/zh-cn/developer/mobile- 


emnulator/， 根 据 不 同 的 系统 选择 不 同 的 版 本 ， 这 里 选择 Windows 系统 下 的 版 本 ， 如 图 17-1 
所 示 。 
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17-1 Opera Mobile Emulator 的 下 载 页 面 
下 载 并 安装 之 后 启动 Opera Mobile Emulator， 打 开 如 图 17-2 所 示 的 窗口 。 在 “资料 ” 列 
表 中 选择 移动 设备 的 类 型 ， 这 里 选择 LG Optimus 3D 选项 ， 单 击 “ 启 动 ” 按 钮 。 
打开 欢迎 界面 ， 用 户 可 以 单 击 不 同 的 链接 ， 查 看 该 软件 的 功能 ， 如 图 17-3 所 示 。 
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17-2 ”参数 设置 界面 图 17-3 欢迎 界面 





单 击 “接受 ”按钮 ， 打 开 手 机 模拟 器 窗口 ， 在 “输入 网 址 ”文本 框 中 输入 需要 查看 网 页 
效果 的 地 址 即 可 ， 如 图 17-4 所 示 。 
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例如 ， 这 里 直接 单 击 “ 当 当 网 ”图 标 ， 即 可 查看 当当 网 在 该 移动 设备 模拟 器 中 的 效果 ， 
如 图 17-5 所 示 。 
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[LG Opti 400.80: PPI: 216 (Bh) [50% = 
17-4 ”手机 模拟 器 窗口 图 17-5 查看 预览 效果 


Opera Mobile Emulator 不 仅 可 以 查看 移动 网 页 的 效果 ， 还 可 以 任意 调整 窗口 的 大 小 ， 从 
而 可 以 查看 不 同 屏幕 尺寸 的 效果 。 这 一 点 也 是 Opera Mobile Emulator 与 其 他 移动 设备 模拟 器 
相 比 最 大 的 优势 。 


17.2.2 ”案例 2—jQuery Mobile 的 安装 

想 要 开发 jQuery Mobile 网 页 ， 必 须要 引用 JavaScript 函数 库 (js)、CSS 样式 表 和 配套 的 
jQuery 函数 库 文 件 。 常 见 的 引用 方法 有 以 下 两 种 。 

1. 直接 引用 jQuery Mobile 库 文件 


从 jQuery Mobile 的 官网 下 载 该 库 文 件 (网 址 是 http://jquerymobile.com/download/)， 如 
图 17-6 所 示 。 








Latest stable version 











图 17-6 下 载 jQuery Mobile 库 文件 


2 


下 载 完 成 即 可 解压 ， 然 后 直接 引用 文件 即 可 ， 代 码 如 下 : 


<head> 

<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="jquery.mobile-1.4.5.css"> 

<script src="jquery.js"></script> 

<script src="jquery.mobile-1.4.5.js"></script> 

</head> 


证 将 下 载 的 文件 解压 并 和 网 页 位 于 同一 目录 下 ， 否 则 会 无 法 引用 而 报错 。 


总 
细心 的 读者 会 发 现 ， 在 <script> 标 签 中 没有 插入 type="text/javascript"， 这 是 因为 所 有 的 浏 
览 器 中 HTML 5 的 默认 脚本 语言 就 是 JavaScript， 所 以 在 HTML 5 中 已 经 不 再 需要 该 属性 。 


2. 从 CDN 中 加 载 jQuery Mobile 


CDN 的 全 称 是 Content Delivery Network， 即 内 容 分 发 网 络 。 其 基本 思路 是 尽 可 能 避 开 互 
联网 上 有 可 能 影响 数据 传输 速度 和 稳定 性 的 瓶颈 和 环节 ， 使 内 容 传输 得 更 快 、 更 稳定 。 

使 用 CDN 中 加 载 jQuery Mobile, 用 户 不 需要 在 电脑 上 安装 任何 东西 。 用 户 仅仅 需要 在 网 
页 中 加 载 层 登 样式 .css) 和 JavaScript E (js) 就 能 够 使 用 jQuery Mobile. 

用 户 可 以 从 jQuery Mobile 官网 中 查找 引用 路 径 ， 网 址 是 http://jquerymobile.com/ 
download/， 进 入 该 网 站 后 ， 找 到 jQuery Mobile 的 引用 链接 ， 然 后 将 其 复制 后 添加 到 HTML 
文件 <head> 标 记 中 即 可 ， 如 图 17-7 所 示 。 
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17-7 复制 代码 
将 代码 复制 到 <head> 标 记 块 内 ， 代 码 如 下 : 


<head> 
<!-- meta 使 用 viewport 以 确保 页 面 可 自由 缩放 --> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<!-- 引入 jQuery Mobile 样式 --> 
<link rel="stylesheet" 
href="http: //code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
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<!-- 引入 jQuery FE --> 

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 

<!-- 引入 jQuery Mobile 库 --> 

<script src="http://code.jquery.com/mobile/1.4.5/jquery-.mobile- 
1.4.5.min.js"></script> 

</head> 


¢ : 由 于 jQuery Mobile 函数 库 仍然 在 开发 中 ， 所 以 引用 的 链接 中 的 版 本 号 可 能 会 
NE 与 本 书 不 同 ， 请 使 用 官方 提供 的 最 新 版 本 ， 只 要 按照 上 述 方法 将 代码 复制 下 来 引用 
即 可 。 


17.2.3 ”案例 3 一 一 jQuery Mobile 网 页 的 架构 


jQuery Mobile 网 页 是 由 header、content 与 footer 3 个 区 域 组 成 的 架构 ， 利 用 <div> 标 记 加 
上 HTML 5 自 定义 属性 data-* 来 定义 移动 设备 网 页 组 件 样式 ， 最 基本 的 属性 data-role 可 以 用 
来 定义 移动 设备 的 页 面 架 构 ， 语 法 格式 如 下 : 


<div data-role="page"> 
<!- 开 始 一 个 page--> 
<div data-role="header"> 
<h1> 这 个 是 标题 </h1> 
</div> 
<div data-role="main" class="ui-content"> 
<p> 这 里 是 内 容 </p> 
</div> 
<div data-role="footer"> 
<h1> 底 部 文本 </h1> 
</div> 
</div> 


在 模拟 器 中 的 预览 效果 如 图 17-8 所 示 。 
© Opera Mobile. — O x 
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图 17-8 程序 预览 效果 
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从 结果 可 以 看 出 ，jQuery Mobile 网 页 以 页 (page) 为 单位 ， 一 个 HTML 页 面 可 以 放 一 个 页 
面 ， 也 可 以 放 多 个 页 面 ， 只 是 浏览 器 每 次 只 会 显示 一 页 ， 如 果 有 多 个 页 面 ， 需 要 在 页 面 中 添 
加 超 链 接 ， 从 而 实现 多 个 页 面 的 切换 。 

代码 分 析 如 下 。 

(1) data-role="page" 是 在 浏览 器 中 显示 的 页 面 。 

(2) data-role="header" 是 在 页 面 项 部 创建 的 工具 条 ， 通 常用 于 标题 或 者 搜索 按钮 。 

(3) data-role="main" 定义 了 页 面 的 内 容 ， 如 文本 、 图 片 、 表 单 、 按 钮 等 。 

(4) “ui-content" 类 用 于 在 页 面 添 加 内 边 距 和 外 边 距 。 

(5) data-role="footer" 用 于 创建 页 面 底部 工具 条 。 


17.3 ”案例 4 一 一 创建 多 页 面 的 jQuery Mobile 网 页 
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本 案例 将 使 用 jQuery Mobile 制作 一 个 多 页 面 的 jQuery Mobile 网 页 ， 并 创建 多 个 页 面 。 
使 用 不 同 的 id 属性 来 区 分 不 同 的 页 面 。 
【 例 17.1】 创 建 多 页 面 的 jQuery Mobile 网 页 (案例 文件 : ch17\17.1.html)。 


<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile- 
1.4.5.min.js"></script> 
</head> 
<body> 
<div data-role="page" id="first"> 
<div data-role="header"> 
<h1> 古 诗 欣赏 </h1> 
</div> 
<div data-role="main" class="ui-content"> 
<p>JLIEIZE FARK, HDL ALIA BE. </p> 
<a href="#second"> 下 一 页 </a> 
</div> 
<div data-role="footer"> 
<h1> 清 代 诗 人 </hi> 
</div> 
</div> 
<div data-role="page" id="second"> 
<div data-role="header"> 
<h1> 古 诗 欣 赏 </h1> 
</div> 
<div data-role="main" class="ui-content"> 
<p> 似 此 星辰 非 昨夜 ， 为 谁 风 露 立 中 宵 。</p> 
<a href="#first"> 上 一 页 </a> 
</div> 
<div data-role="footer"> 
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<h1> 清 代 诗 人 </h1i> 
</div> 
</div> 
</body> 
</html> 


在 模拟 器 中 的 预览 效果 如 图 17-9 所 示 。 单 击 “ 下 一 页 ” 超 链接 ， 即 可 进入 第 二 页 ， 如 
图 17-10 所 示 。 单 击 “ 上 一 页 ” 超 链接 ， 即 可 返回 到 第 一 页 中 。 
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图 17-9 程序 预览 效果 图 17-10 第 二 页 预览 效果 


17.4 案例 5 一 一 将 页 面 作为 对 话 框 使 用 


对 话 框 是 用 于 页 面 信息 的 显示 或 者 表单 信息 的 输入 。jQuery Mobile 通过 在 链接 中 添加 如 
下 属性 ， 即 可 将 页 面 作为 对 话 框 使 用 : 


data-dialog="true" 


【 例 17.2】 将 页 面 作 为 对 话 框 使 用 (案例 文件 : ch17\17.2 html). 


<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile- 
1.4.5.min.js"></script> 
</head> 
<body> 
<div data-role="page" id="first"> 

<div data-role="header"> 

<h1> 古 诗 鉴赏 </h1> 


</div> 


mw) 


<div data-role="main" class="ui-content"> 
<p> 浩 荡 离 悉 白 日 斜 ， 吟 鞭 东 指 即 天 涯 。 落 红 不 是 无 情 物 ， 化 作 春 泥 更 护 花 。</p> 
<a href="#second"> 查 看 详情 </a> 
</div> 
<div data-role="footer"> 
<h1> 清 代 诗词 </h1> 
</div> 
</div> 
<div data-role="page" data-dialog="true" id="second"> 
<div data-role="header"> 
<h1> 诗 词 鉴 赏 </h1> 
</div> 
<div data-role="main" class="ui-content"> 
<p> 这 首 诗 是 《已 次 杂 诗 》 的 第 五 首 ， 写 诗人 离 京 的 感受 。 虽 然 载 着 “浩荡 离愁 ”， 却 表示 仍然 要 
为 国 为 民 尽 自己 最 后 一 份 心力 。</p> 
<a href="#first"> 上 一 页 </a> 
</div> 
<div data-role="footer"> 
<h1> 清 代 诗 词 </h1> 
</div> 
</div> 
</body> 
</html> 


在 模拟 器 中 的 预览 效果 如 图 17-11 所 示 。 单 击 “ 查 看 详情 ” 超 链接 ， 即 可 打开 一 个 对 话 
框 ， 如 图 17-12 所 示 。 
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17-11 程序 预览 效果 17-12 ”对 话 框 预览 效果 


从 结果 可 以 看 出 ， 对 话 框 与 普通 页 面 不 同 ， 它 显示 在 当前 页 面 上 , 但 又 不 会 填充 完整 的 页 
面 ， 顶 部 图 标 日 用 于 关闭 对 话 框 ， 单 击 “ 上 一 页 ” 超 链接 ， 也 可 以 关闭 对 话 框 。 


17.5 “案例 6 一 一 绚丽 多 彩 的 页 面 切换 效果 


jQuery Mobile 提供 了 各 种 页 面 切换 到 下 一 个 页 面 的 效果 。 主 要 通过 设置 data-transition 属 
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性 来 完成 各 种 页 面 切换 效果 ， 其 语法 格式 如 下 : 


<a href="#link" data-transition=" 切 换 效果 "> 切换 下 一 页 </a> 
其 中 切换 效果 有 很 多 ， 如 表 17-1 所 示 。 
表 17-1 页 面 切换 效果 











页 面 效果 参数 x 
fade 默认 的 切换 效果 。 淡 入 到 下 一 页 
none 无 过 渡 效果 
flip 从 后 向 前 翻转 到 下 一 页 
flow 抛 出 当前 页 ， 进 入 下 一 页 
pop 像 弹出 窗口 那样 转 到 下 一 页 
slide 从 右 向 左 滑动 到 下 一 页 
slidefade 从 右 向 左 滑动 并 淡 入 到 下 一 页 
slideup 从 下 到 上 滑动 到 下 一 页 
slidedown 从 上 到 下 滑动 到 下 一 页 
tum 转向 下 一 页 
m1 
i it 在 jQuery Mobile 的 所 有 链接 上 ， 默 认 使 用 淡 入 淡出 的 效果 。 


例如 ， 设 置 页 面 从 右 向 左 滑动 到 下 一 页 ， 代 码 如 下 : 


<a href="#second" data-transition="slide"> 切 换 下 一 页 </a> 


上 面 的 所 有 效果 支持 后 退行 为 。 例 如 ， 用 户 想 让 页 面 从 左 向 右 滑动 ， 可 以 添加 data- 


direction 属性 为 reverse 值 即 可 ， 代 码 如 下 : 


<a href="#second" data-transition="slide" data-direction="reverse"> 切 换 下 一 


页 </a> 
【 例 17.3】 实现 不 同 的 页 面 切 换 效 果 ( 案 例文 件 : ch17\17.3.html). 


<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile- 
1.4.5.min.js"></script> 

</head> 
<body> 
<div data-role="page" id="first"> 

<div data-role="header"> 

<h1> 古 诗 欣 赏 </h1> 


</div> 


<div data-role="main" class="ui-content"> 
<p> 老 农家 贫 在 山 住 ， 耕 种 山田 三 四 亩 。</p> 
<! 一 实现 从 右 到 左 切换 到 下 一 页 --> 
<a href="#second" data-transition="slide" > 下 一 页 </a> 
</div> 
<div data-role="footer"> 
<h1> 野 老 歌 </h1> 
</div> 
</div> 
<div data-role="page" id="second"> 
<div data-role="header"> 
<h1> 古 诗 欣 赏 </h1> 
</div> 
<div data-role="main" class="ui-content"> 
<p> YROR eS, MILE UIA. </p> 
<! SEU ze BIA BI FHL --> 
<a href="#first" data-transition="slide" data-direction="reverse">k—W 
</a> 
</div> 
<div data-role="footer"> 
<h1> 野 老 歌 </h1> 
</div> 
</div> 
</body> 
</html> 


在 模拟 器 中 的 预览 效果 如 图 17-13 所 示 。 单 击 “ 下 一 页 ” 超 链接 ， 即 可 从 右 到 左 滑动 进 
入 第 二 页 ， 如 图 17-14 所 示 。 单 击 “ 上 一 页 ” 超 链接 ， 即 可 从 左 到 右 滑动 返回 到 第 一 页 。 
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疑问 1: 如 何在 模拟 器 中 查看 做 好 的 网 页 效果 ? 
答 : HTML 文件 制作 完成 后 ， 要 想 在 模拟 器 中 测试 ， 可 以 在 地 址 栏 中 输入 文件 的 路 径 ， 


e 
301® 
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例如 输入 如 下 : 

file://localhost/ch16/16.2.html 

为 了 防止 输入 错误 ， 可 以 直接 将 文件 拖 忠 到 地 址 栏 中 ， 模 拟 器 会 自动 帮助 用 户 添加 完整 

路 径 。 

疑问 2: jQuery Mobile 支持 哪些 移动 设备 ? 

E: 目前 市 面 上 移动 设备 非常 多 ， 如 果 想 查询 jQuery Mobile 支持 哪些 移动 设备 ， 可 以 参 
照 jQuery Mobile 网 站 的 各 厂商 支持 表 ， 还 可 以 参考 维基 百科 网 站 对 jQuery Mobile 说 明 中 提 
供 的 Mobile browser support 一 览 表 。 

疑问 3: 我 的 浏览 器 为 什么 不 支持 页 面 切换 效果 ? 


E: 为 了 实现 页 面 切换 效果 ， 浏 览 器 必须 支持 功能 。 目 前 ,支持 CSS 3 3D 切换 功能 的 
浏览 器 最 小 版 本 包括 TE 10.0、Chrome 12.0, Firefox 16.0, Safari 4.0 和 Opera 15.0 等 。 
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第 18 章 
jQuery Mobile UI 
组 件 
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jQuery Mobile 针对 用 户 界 面 提供 了 各 种 可 视 化 的 标签 ， 包 括 按钮 、 复 选 框 、 
选择 菜单 、 列 表 、 弹 窗 、 工 具 栏 、 面 板 、 导 航 和 布局 等 。 这 些 可 视 化 标签 与 HIML 5 
标记 一 起 使 用 ， 即 可 轻 轻松 松 地 开发 出 绚丽 多 彩 的 移动 网 页 。 本 章 重 点 学 习 这 些 标 
签 的 使 用 方法 和 技巧 。 


重点 案例 效果 


awa 





Essia 
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18.1 套用 UI 组 件 


jQuery Mobile 提供 很 多 可 视 化 的 UI 组 件 ， 只 要 套用 之 后 ， 就 可 以 生成 绚丽 且 适 合 移动 设 
备 使 用 的 组 件 。jQuery Mobile 中 各 种 可 视 化 的 Ul 组 件 与 HTML 5 标记 大 同 小 异 。 下 面 介 绍 
常用 组 件 的 用 法 ， 其 中 按钮 、 列 表 等 功能 变化 比较 大 的 后 面 会 做 详细 介绍 。 


18.1.1 案例 1 一 一 表单 组 件 
jQuery Mobile 使 用 CSS 自动 为 HTML 表单 添加 样式 ， 让 它们 看 起 来 更 具 吸 引力 ， 触 摸 


起 来 更 具 友好 性 。 
在 jQuery Mobile 中 ， 经 常 使 用 的 表单 控件 如 下 。 
1. 文本 框 
文本 框 的 语法 格式 如 下 : 


<input type="text" name="fname" id="fname" value=" "> 


其 中 value 属性 是 文本 框 中 显示 的 内 容 ， 也 可 以 使 用 placeholder 来 指定 一 个 简短 的 描 


& 


用 来 描述 输入 内 容 的 含义 。 


【 例 18.1】 使 用 文本 框 (实例 文件 : ch18\18.1.html)。 


<!DOCTYPE html> 


<html> 
<head> 


<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile- 
1.4.5.min.js"></script> 


</head> 
<body> 


<div data-role="first"> 
<div data-role="header"> 


<h1> 输 入 会 员 信息 </h1> 
</div> 
<div data-role="main" class="ui-content"> 
<form> 
<div class="ui-field-contain"> 
<label for="fullname"> 姓 名 : </label> 
<input type="text" name="fullname" id="fullname"> 


<label 
<input 
<label 
<input 


邮箱 "> 


for="bday"> 出 生年 月 : </label> 

type="date" name="bday" id="bday"> 
for="email">E-mail:</label> 

type="email" name="email" id="email" placeholder=" 输 入 您 的 电子 


</div> 
<input type="submit" data-inline="true" value=" 注 册 "> 
</form> 
</div> 
</div> 
</body> 
</html> 


在 模拟 器 中 的 预览 效果 如 图 18-1 所 示 。 单 击 “ 出 生年 月 ”下 拉 列 表 框 时 ， 会 自动 打开 日 
期 选择 器 ， 用 户 直接 选择 相应 的 日 期 即 可 ， 如 图 18-2 所 示 。 
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输入 会 员 信息 
姓名 : 
4567 8 9 10 
出 生年 月 : 11 12 13 14 15 16 17 
-| 18 19 20 21 22 23 24 | 
a 25 26 27 28 29 30 37 
E-mail: 
1234567 
输入 您 的 电子 邮箱 
SR 
注册 注册 
Cmo 4355579 PP 25 (Ds) 10056 ~ (cater 435.579 991-253 [a] (1008 ~ 
18-1 程序 预览 效果 18-2 日 期 选择 器 
2. 文本 域 


使 用 <textarea> 可 以 实现 多 行文 本 的 输入 。 
【 例 18.2】 使 用 文本 域 (实例 文件 ch18\18.2.htmD)。 


<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile- 
1.4.5.min.js"></script> 

</head> 
<body> 
<div data-role="first"> 

<div data-role="header"> 

<h1> 多 行文 本 域 </h1> 

</div> 

<div data-role="main" class="ui-content"> 

<form> 
<div class="ui-field-contain"> 
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<label for="info"> 输 入 最 喜欢 的 一 首 古诗 :</Labe1> 
<textarea name="addinfo" id="info"></textarea> 
</div> 
<input type="submit" data-inline="true" value=" 提 交 "> 
</form> 
</div> 
</div> 
</body> 
</html> 


在 模拟 器 中 的 预览 效果 如 图 18-3 所 示 。 输 入 多 行内 容 时 ， 文 本 域 会 根据 输入 的 内 容 ， 自 
动 调整 高 度 ， 如 图 18-4 所 示 。 
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\ Aisa 
多 行文 本 域 输入 最 喜欢 的 一 首 古诗 : 
大 风 歌 
输入 最 喜欢 的 一 首 古 诗 : 大 风 起 兮 云 飞扬 ， 
| 威 加 海内 兮 归 故 乡 ， 
| 安 得 猛 士 今 守 四 方 ! 
提交 提交 


加 路 已 面 - 








图 18-3 ”程序 预览 效果 图 18-4 输入 内 容 
3. 搜索 输入 框 
HTML 5 中 新 增 的 type="search" 类 型 为 搜索 输入 框 ， 它 是 为 输入 搜索 定义 文本 字段 。 
搜索 输入 框 的 语法 格式 如 下 : 
<input type="search" name="search" id="search" placeholder=" 搜 索 内 容 "> 
搜索 输入 框 的 效果 如 图 18-5 所 示 。 
Q 搜索 





图 18-5 搜索 输入 杠 
4. 范围 滑动 条 
使 用 <input type="range"> 控 件 ， 即 可 创建 范围 滑动 条 ， 语 法 格式 如 下 : 


<input type="range" name="points" id="points" value="50" min="0" max="100" 
data-show-value="true"> 
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其 中 ，max 属性 规定 允许 的 最 大 值 。min 属性 规定 允许 的 最 小 值 。step 属性 规定 合法 的 
数字 间隔 。value 属性 规定 默认 值 。data-show-value 属性 规定 是 否 在 按钮 上 显示 进度 的 值 ， 如 
果 设 置 为 tue， 则 表示 显示 进度 的 值 ;， 如 果 设 置 为 false， 则 表示 不 显示 进度 的 值 。 

【 例 18.3】 使 用 范围 滑动 条 (实例 文件 : ch18\18.3.html). 


<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet” 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile- 
1.4.5.min.js"></script> 

</head> 
<body> 
<div data-role="first"> 

<div data-role="header"> 





<h1> 工 作 进度 申报 </h1> 
</div> 
<div data-role="main" class="ui-content"> Sonia ana =a oe 
<form> 
<label for="points"> 工 作 完成 的 进度 :</label> 工作 进度 申报 
<input type="range" name="points" id="points" 工作 完成 的 进度 : 
value="50" min="0" max="100" data-show- 5 =~ 
value="true"> Eo B 20) 
<input type="submit" data-inline="true" 
value=" 提 交 "> 提交 
</form> 
</div> 
</div> 
</body> 
Sa 
在 模拟 器 中 的 预览 效果 如 图 18-6 所 示 。 用 户 可 以 拖 动 滑 块 ， ae nei: 
选择 需要 的 值 。 也 可 以 通过 加 减 按钮 ， 精 确 选择 进度 的 值 。 图 18.6 程序 预览 效果 
使 用 data-popup-enabled 属性 可 以 设置 小 弹 窗 效果 ， 代 码 


如 下 : 


<input type="range" name="points" id="points" value="50" min="0" max="100" 
data-popup-enabled="true"> 


添加 后 的 效果 如 图 18-7 所 示 。 


滑 块 控件 


25 


18-7 ”进度 值 显示 效果 
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使 用 data-highlight 属性 可 以 高 亮度 显示 滑动 条 的 值 ， 代 码 如 下 : 


<input type="range" name="points" id="points" value="50" min="0" max="100" 
data-highlight="true"> 


添加 后 的 效果 如 图 18-8 所 示 。 
SARETE 





18-8 ”高 亮度 显示 进度 值 效果 
5. 表单 按钮 


表单 按钮 分 为 3 种 ， 即 提交 按钮 、 取 消 按钮 和 普通 按钮 。 只 需要 在 type 属性 中 设置 表单 
的 类 型 即 可 ， 代 码 如 下 : 


<input type="submit" value=" 提 交 按 钮 "> 
<input type="reset" value=" 取 消 按钮 "> 
<input type="button”value=" 普 通 按钮 "> 


在 模拟 器 中 的 预览 效果 如 图 18-9 所 示 。 
当 用 户 在 有 限 数量 的 选择 中 仅 选 取 一 个 选项 时 ， 经 常用 到 表单 中 的 单 选 按钮 。 通 过 
type="radio" 来 创建 一 系列 单 选 按钮 ， 代 码 如 下 : 


<fieldset data-role="controlgroup"> 
<legend> 请 选择 您 的 年 级 : </legend> 
<label for="one"> 一 年 级 </1abel> 
<input type="radio" name="grade" id="one" value="one"> 
<label for="two"> 二 年 级 </label> 
<input type="radio" name="grade" id="two" value="two"> 
<label for="three"> 三 年 级 </label> 
<input type="radio" name="grade" id=" three" value=" three"> 
</fieldset> 


在 模拟 器 中 的 预览 效果 如 图 18-10 所 示 。 


请 选择 您 的 年 级 : 
提交 按钮 一 年 级 
取消 按钮 O = 年 级 
普通 按钮 三 年 级 
18-9 ”表单 按钮 预览 效果 18-10 单 选 按钮 
| <fieldset> 标 记 用 来 创建 按钮 组 ， 组 内 各 个 组 件 保持 自己 的 功能 。 在 <fieldset> 


提 
A 标记 内 添加 data-role="controlgroup"， 这 样 这 些 单 选 按钮 样式 统一 ， 看 起 来 像 一 个 
组 合 。 其 中 <legend> 标 签 用 来 定义 按钮 组 的 标题 。 
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6. 复 选 框 


当 用 户 在 有 限 数 量 的 选择 中 选取 一 个 或 多 个 选项 时 ， 需 要 使 用 复 选 框 。 代 码 如 下 : 


<fieldset data-role="controlgroup"> 
<legend> 请 选择 您 喜爱 的 季节 : </legend> 
<label for="spring"> 春 天 </label> 


<input type="checkbox" name="season" 


<label for="summer"> 夏 天 </label> 


<input type="checkbox" name="season" 


<label for="fall"> 秋 天 </1label> 


<input type="checkbox" name="season" 


<label for="winter">SK</label> 


<input type="checkbox" name="season" 


</fieldset> 


在 模拟 器 中 的 预览 效果 如 图 18-11 所 示 。 


7. 选择 菜单 


使 用 <select> 标 签 可 以 创建 带 有 若干 选项 的 下 拉 列 表 。<select> 标 签 内 的 <option> 属 性 定义 


了 列表 中 的 可 用 选项 。 


请 选择 您 喜爱 的 季节 : 
春天 
夏天 
O 秋天 
冬天 


18-11 Bitte 


代码 如 下 : 


<fieldset data-role="fieldcontain"> 


<label for="day"> 选 择 值 日 时 间 : </label> 


<select name="day" id="day"> 


<option 
<option 
<option 
<option 
<option 
<option 
<option 


value="mon">##4—</option> 
value="tue"> 星 期 二 </option> 
value="wed"> 星 期 三 </option> 
value="thu"> 星 期 四 </option> 
value="fri"> 星 期 五 </option> 
value="sat"> 星 期 六 </option> 
value="sun"> 星 期 日 </option> 


</select> 


</fieldset> 


在 模拟 器 中 的 预览 效果 如 图 18-12 所 示 。 


如 果菜 单 中 的 选项 还 需要 再 次 分 组 ， 可 以 在 <select> 内 使 用 <optgroup> 标 签 ， 添 加 后 的 代 


码 如 下 : 


<fieldset data-role="fieldcontain"> 


<label for="day"> 选 择 值 日 时 间 : </label> 


id="summer" 


id="fali" 


id="winter" 





id="spring" value="spring"> 
value="summer"> 
value="fall"> 


value="winter"> 


选择 值 日 时 间 : 星期 一 


星期 六 


18-12 ”选择 菜单 
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<select name="day" id="day"> 














<optgroup label=" 工 作 日 "> asnasa: 工作 日 
<option value="mon"> 星 期 一 </option> 星期 六 aa F 
<option value="tue"> 星 期 二 </option> 四 
<option value="wed"> 星 期 三 </ option> = 
<option value="thu"> 星 期 四 </option> az 
<option value=" fri"> 星 期 五 </ option> 星期 四 
</optgroup> zma 
<optgroup label=" 休 息 日 "> 休息 日 
<option value=" sat"> 星 期 六 </option> 
<option value="sun"> 星 期 日 </option> Laa 
</optgroup> 
</select> 
</fieldset> 18-13 ”菜单 选项 分 组 后 的 效果 


在 模拟 器 中 的 预览 效果 如 图 18-13 所 示 。 
如 果 想 选择 菜单 中 的 多 个 选项 ， 需 要 设置 <select> 标 签 的 multiple 属性 。 设 置 代码 如 下 : 


<select name="day" id="day" multiple data-native-menu="false"> 


例如 把 上 面 的 代码 修改 如 下 : 


<fieldset data-role="fieldcontain"> 

<label for="day"> 选 择 多 个 值 日 时 间 : </label> 

<select name="day" id="day" multiple data-native-menu="false"> 
<optgroup label=" 工 作 日 "> 


© 


图 18-14 ”选中 多 个 菜单 选项 


<option 
<option 
<option 
<option 
<option 


value="mon"> 星 期 一 </option> 
value="tue"> 星 期 二 </option> 
value="wed"> 星 期 三 </option> 
value="thu"> 星 期 四 </option> 
value="fri"> 星 期 五 </option> 


</optgroup> 
<optgroup label=" 休 息 日 "> 


<option 
<option 


value="sat"> 星 期 六 </option> 
value="sun"> 星 期 日 </option> 


</optgroup> 
</select> 
</fieldset> 


在 模拟 器 中 预览 ， 选 择 菜单 时 的 效果 如 图 18-14 所 示 。 选 择 完成 后 ， 即 可 看 到 多 个 菜单 
选项 被 选择 ， 如 图 18-15 所 示 。 


选择 多 个 全 日 时 间 : 


a 
a 
选择 乡 个 值 日 时 间 : 
a = pik 
星期 一, 星期 三 , 星期 六 30 


图 18-15 多 个 菜单 选项 被 选择 后 的 效果 


8. 翻转 波动 开关 
设置 <input type="checkbox"> 标 签 的 data-role 为 "flipswitch" 时 ， 可 以 创建 翻转 波动 开关 。 
代码 如 下 : 
<form> 
<label for="switch"> 切 换 开 关 : </label> 
<input type="checkbox" data-role="flipswitch" name="switch" 
id="switch"> 
</form> 
在 模拟 器 中 的 预览 效果 如 图 18-16 所 示 。 
同时 ， 用 户 还 可 以 使 用 "checked" 属 性 来 设置 默认 的 选项 。 代 码 如 下 : 
<input type="checkbox" data-role="flipswitch" name="switch" id="switch" 
checked> 
修改 后 的 预览 效果 如 图 18-17 所 示 。 SS 
在 默认 情况 下 ， 开 关切 换 的 文本 为 On 和 Off。 可 以 使 用 data-on-text 和 data-off-text 属性 N 
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来 修改 ， 代 码 如 下 : 


<input type="checkbox" data-role="flipswitch" name="switch" id="switch" 
data-on-text=" 打 开 " data-off-text=" 关 闭 "> 


修改 后 的 预览 效果 如 图 18-18 所 示 。 
切换 开关 : 切换 开关 : 切换 开关 : 


7 ED xa 
Æ 18-16 开关 默认 效果 图 18-17 修改 默认 选项 后 的 效果 18-18 ”修改 切换 开关 文本 
后 的 效果 


18.1.2 案例 2 一 一 按钮 和 组 按钮 


前 面 简单 介绍 过 表单 按钮 。 由 于 按钮 和 按钮 组 功能 变化 比较 大 ， 下 面 详细 讲述 它们 的 使 
用 方法 和 技巧 。 

在 jQuery Mobile 中 ， 创 建 按钮 的 方法 包括 以 下 3 种 。 

(1) 使 用 <button> 标 签 创建 普通 按钮 。 代 码 如 下 : 


<button> 按 钮 </button> 


(2) 使 用 <input> 标 签 创 建 表单 按钮 。 代 码 如 下 : 


<input type="button" value=" 按 钮 "> 


(3) 使 用 data-role="button" 属 性 创建 链接 按钮 。 代 码 如 下 : 


<a href="#" data-role="button"> 按 钮 </a> 
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在 jQuery Mobile 中 ， 按 钮 的 样式 会 被 自动 添加 上 。 为 了 让 按钮 在 移动 设备 上 更 具 吸 引力 
和 可 用 性 ， 推 荐 在 页 面 间 进 行 链接 时 ， 使 用 第 三 种 方法 ; 在 表单 提交 时 ， 使 用 第 一 种 或 第 二 
种 方法 。 

在 默认 情况 下 ， 按 钮 占 满 整 个 屏幕 宽度 。 如 果 想 要 一 个 仅 是 与 内 容 一 样 宽 的 按钮 ， 或 者 
需要 并 排 显示 两 个 或 多 个 按钮 ， 可 以 通过 设置 data-inline="true" 来 完成 。 代 码 如 下 : 


<a href="#pagetwo" data-role="button" data-inline="true"> 下 一 页 </a> 


下 面 通过 一 个 案例 来 区 别 默认 按钮 和 设置 后 按钮 的 区 别 。 
【 例 18.4】 使 用 不 同 的 按钮 (实例 文件 ，ch18\18.4.html)。 


<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile- 
1.4.5.min.js"></script> 
</head> 
<body> 
<div data-role="page" id="first"> 
<div data-role="header"> 
<h1> 按 钮 的 区 别 </h1> 
</div> 
<div data-role="content" class="content"> 
<p> 普 通 / 默认 按钮 :</p> 
<a href="#second" data-role="button"> 下 一 页 </a> 
<p> 设 置 后 的 按钮 :</p> 
<a href="#second" data-inline="true"> 下 一 页 </a> 
<a href="#first" data-inline="true"> 上 一 页 </a> 
</div> a muse 
<div data-role="footer"> 
<h1>2 种 按钮 </h1> 
</div> 
</div> 
</body> 2 种 按钮 
</html> 


在 模拟 器 中 的 预览 效果 如 图 18-19 所 示 。 18-19 不 同 的 按钮 的 效果 

jQuery Mobile 提供 了 一 个 简单 的 方法 来 将 按钮 组 合 在 一 起 。 使 用 data-role="controlgroup" 
属性 即 可 通过 按钮 组 来 组 合 按钮 。 同 时 使 用 data-type="horizontallvertical" 属 性 来 设置 按钮 的 排 
列 方式 是 水 平 还 是 垂直 。 

【 例 18.5] 组 按钮 的 排列 (实例 文件 : ch18\18.5.html). 


<!DOCTYPE html> 

<html> 

<head> 

<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 





按钮 的 区 别 


设置 后 的 按钮 
下 -页 上 -页 
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<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile- 
1.4.5.min.js"></script> 
</head> 
<body> 
<div data-role="page" id="first"> 
<div data-role="header"> 
<h1> 组 按钮 的 排列 </h1> 
</div> 
<div data-role="content" class="content"> 
<div data-role="controlgroup" data-type="horizontal"> 
<p> 水 平 排列 的 按钮 :</p> 
<a href="#" data-role="button"> 按 钮 a</a> 
<a href="#" data-role="button"> 按 钮 p</a> 
<a href="#" data-role="button"> 按 钮 c</a> 
</div><br> 
<div data-role="controlgroup" data-type="vertical" 
<p> 垂 直 排列 的 按钮 :</p> 
<a href="#" data-role="button"> 按 钮 a</a> 
<a href="#" data-role="button"> 按 钮 p </a> 
<a href="#" data-role="button"> 按 钮 c</a> 
</div> 
</div> 
<div data-role="footer"> 
<h1>2 种 排列 方式 </h1> 
</div> 
</div> 
</body> 
</html> 


在 模拟 器 中 的 预览 效果 如 图 18-20 所 示 。 
组 按钮 的 排列 
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水 平 排列 的 按钮 : 


按钮 8 按钮 ”按钮 c 


垂直 排列 的 按钮 : 


按钮 a 
按钮 b 
按钮 c 


图 18-20 不 同 排列 方式 的 按钮 组 


18.1.3 ”案例 3 一 一 按钮 图 标 


jQuery Mobile 提供 了 一 套 丰富 多 彩 的 按钮 图 标 。 用 户 只 需要 使 用 data-icon 属性 即 可 添加 
按钮 图 标 。 常 用 的 图 标 样式 如 表 18-1 所 示 。 
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表 18-1 常用 的 按钮 图 标 样式 
图 标 参数 外 观 样式 说 明 
data-icon="arrow-l" © ans 左 箭头 
data-icon="arrow-1" © ams 右 箭头 
data-icon="arrow-u" o ims 上 箭头 
data-icon="arrow-d" © TRS 下 箭头 
data-icon="info" © 信息 信息 
data-icon="plus" © 加 号 加 号 
data-icon="minus" © as me 
data-icon="check" © at 复 选 
data-icon="refresh" © ansa 重新 整理 
data-icon="delete" © me 删除 
data-icon="forward" o me 前 进 
data-icon="back" © ma 后 退 
data-icon="star" © ae 星 形 
data-icon="audio" 9 扬声器 扬声器 
data-icon="lock" © nu 挂 锁 
data-icon="search" © 搜索 搜索 
data-icon="alert" o =s 告 
data-icon="grid" © 网 格 网 格 
data-icon="home" © 首页 首页 
例如 以 下 代码 : 


data-role="button" data-icon="lock"> 挂 锁 </a> 
data-role="button" data-icon="check"> 复 选 </a> 

<a href="#" data-role="button" data-icon="refresh"> 重 新 整理 </a> 
<a href="#" data-role="button" data-icon="delete"> 删 除 </a> 


在 模拟 器 中 的 预览 效果 如 图 18-21 所 示 。 

细心 的 读者 会 发 现 ， 按 钮 上 的 图 标 默 认 情 况 下 会 出 现在 按钮 的 左边 。 如 果 需 要 设置 图 标 
的 位 置 ， 可 以 设置 data-iconpos 属 性 来 指定 位 置 ， 包 括 top( 顶 部 )、right( 右 侧 ) 和 bottom( 底 
部 )。 例 如 以 下 代码 : 

<a href="#" data-role="button" data-icon="refresh"> 重 新 整理 </a> 

<a href="#" data-role="button" data-icon="refresh" data-iconpos="top"> 重 新 整 

理 </a> 

<a href="#" data-role="button" data-icon="refresh" data-iconpos="right"> 重 

新 整理 </a> 


<a href="#" data-role="button" data-icon="refresh" data-iconpos="bottom"> 重 


新 整理 </a> 
在 模拟 器 中 的 预览 效果 如 图 18-22 所 示 。 





€i 

第 

© 里 新 整理 = 

© 挂 锁 © 5 
ames S 

© aż 3 
重新 整理 © 三 

© 重新 整理 fo) 
重新 整理 = 

x} B © = 
组 

图 18-21 按钮 图 标 效果 图 18-22 ”设置 图 标的 位 置 i 

pr 如 果 不 想 让 按钮 上 出 现 文字 ， 可 以 将 data-iconpos 属性 设置 为 notext， 这 样 只 


\ 会 显示 按钮 ， 而 没有 文字 。 


18.1.4 案例 4 一 一 弹 窗 


弹 窗 是 一 个 非常 流行 的 对 话 框 。 弹 窗 可 以 覆盖 在 页 面 上 展示 。 弹 窗 可 用 于 显示 一 段 文 
本 、 图 片 、 地 图 或 其 他 内 容 。 创 建 一 个 弹 窗 ， 需 要 使 用 <a> 和 <div> 标 签 。 在 <a> 标 签 中 添加 
data-rel="popup" 属 性 ， 在 <div> 标 签 中 添加 data-role="popup" 属 性 。 然 后 为 <div> 设 置 id， 设 置 
<a> 的 href 值 为 <div> 指 定 的 id， 其 中 <div> 中 的 内 容 为 弹 窗 显示 的 内 容 。 代 码 如 下 : 

<a href="#firstpp" data-rel="popup"> 显 示 弹 窗 </a> 

<div data-role="popup" id="firstpp"> 

<p> 这 是 弹出 窗口 显示 的 内 容 </p> 

</div> 

在 模拟 器 中 的 预览 效果 如 图 18-23 所 示 。 单 击 “ 显 示 弹 窗 ” 按 钮 即 可 显示 弹出 窗口 的 
内 容 。 





i <div> 弹 窗 与 点 击 的 <a> 链 接 必须 在 同一 个 页 面 上 。 
意 


在 默认 情况 下 ， 点 击 弹 窗 之 外 的 区 域 或 按 Esc 键 即 可 关闭 弹 窗 。 用 户 也 可 以 在 弹 窗 上 添 
加 关闭 按钮 ， 只 需要 设置 属性 data-rel="back" 即 可 ， 结 果 如 图 18-24 所 示 。 





Q 
显示 弹 窗 这 是 弹出 窗口 显示 的 内 容 这 是 弹出 窗口 显示 的 内 容 | 
图 18-23 RAR 图 18-24 ” 带 关闭 按钮 的 弹 窗 效 果 


用 户 还 可 以 在 弹 窗 中 显示 图 片 ， 代 码 如 下 : 


<div id="pageone" data-role="content" class="content" > 
<p> 单 击 下 面 的 小 图 片 </p> 
<a href="#firstpp" data-rel="popup" > 
<img src="123.jpeg" style="width:200px;"></a> 
<div data-role="popup" id="firstpp"> 
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<p> 这 是 我 的 图 片 ! </p> 
</a><img src="123.jpeg" style="width:500px;height:500px;" > 
</div> 

</div> 


在 模拟 器 中 的 预览 效果 如 图 18-25 所 示 。 单 击 图 片 ， 即 可 弹出 如 图 18-26 所 示 的 图 片 弹 窗 。 


单 击 下 面 的 小 图 片 








图 18-25 在 模拟 器 中 的 预览 效果 图 18-26 图 片 弹 窗 效 果 


18.2 列 & 


与 电脑 相 比 ， 移 动 设备 屏幕 比较 小 ， 所 以 常常 以 列表 的 形式 显示 数据 。 下 面 学 习 列 表 的 
使 用 方法 和 技巧 。 


18.2.1 案例 5 一 一 列表 视图 


jQuery Mobile 中 的 列表 视图 是 标准 的 HTML 列表 ， 包 括 有 序列 表 <ol> 和 无 序列 表 <ul>。 
列表 视图 是 jQuery Mobile 中 功能 强大 的 一 个 特性 。 它 会 使 标准 的 无 序 或 有 序列 表 应 用 更 
广泛 。 

列表 的 使 用 方法 非常 简单 ， 只 需要 在 <ul> 或 <ol> 标 签 中 添加 属性 data-role="listview"。 每 
个 项 目 (<li>) 中 可 以 添加 链接 。 下 面 通过 一 个 案例 来 学 习 。 

【 例 18.6】 使 用 列表 视图 (实例 文件 : ch18\18.6.html). 


<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile- 
1.4.5.min.js"></script> 

</head> 
<body> 
<div data-role="page" id="first"> 

<div data-role="header"> 


<h1> 列 表 视 图 </h1> 
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</div> 
<div data-role="content" class="content"> 
<h2> 有 序列 表 : </h2> 
<ol data-role="listview"> 
<li><a href="#">#&</a></1i> 
<li><a href="#">} f</a></li> 
<li><a href="#"> 蔷 果 </a></1i> 
</ol> 
<h2> 无 序列 表 : </h2> 
<ul data-role="listview"> 
<li><a href="#">} ¥</a></li> 
<li><a href="#"> 韭 菜 </a></1i> 
<li><a href="#"> 菠 菜 </a></1i> 
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</ul> 
</div> 
</div> 
<div data-role="footer"> 
<h1> 有 序列 表 和 无 序列 表 </h1> 
</div> 
</div> 
</body> 
</html> 
在 模拟 器 中 的 预览 效果 如 图 18-27 所 示 。 
列表 视图 
有 序列 表 : 
1 oR © 
2 wt © 
3 $p © 
无 序列 表 : 
Gid © 


Ẹ 
© 


18-27 ”有 序列 表 和 无 序列 表 


Se 在 默认 情况 下 ， 列 表 项 的 链接 会 自动 变 成 一 个 按钮 ， 此 时 不 再 需要 使 用 data- 
AL role="button" 属 性 。 


从 结果 可 以 看 出 ， 列 表 样 式 中 没有 边缘 和 圆 角 效果 ， 这 里 可 以 通过 设置 属性 data- 
inset="true" 来 完成 ， 代 码 如 下 : 


<ul data-role="listview" data-inset="true"> 


上 面 案例 的 部 分 代码 修改 如 下 : 


<div data-role="content" class="content"> 
<h2> 标 准 列表 样式 : </h2> 


<ol data-role="listview"> 
<li><a href="#">##</a></1i> 
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<li><a href="#"> f</a></li> 
<li><a href="#"> 苹 果 </a></1i> 
</ol> 
<h2> 添 加 data-inset="true" 属 性 后 的 样式 : </h2> 
<ul data-role="listview" data-inset="true"> 
<li><a href="#"> 芹 菜 </a></1i> 
<li><a href="#"> 韭 菜 </a></1i> 
<li><a href="#"> 菠 菜 </a></1i> 
</ul> 
</div> 


在 模拟 器 中 的 预览 效果 如 图 18-28 所 示 。 

如 果 列 表 项 比较 多 ， 用 户 可 以 使 用 列表 分 隔 项 对 列表 进行 分 组 操作 ， 这 样 使 列表 看 起 来 
更 整齐 。 通 过 在 列表 项 <li> 标 签 中 添加 data-role="list-divider" 属性 即 可 指定 列表 分 隔 ， 例 如 以 
下 代码 : 


<ul data-role="listview"> 

<li data-role="list-divider">#i3</1i> 
<li><a href="#">} #</a></li> 
<li><a href="#"> 韭 菜 </a></1i> 

<li data-role="1list-divider"> 水 果 </1i> 
<li><a href="#"> 苹 果 </a></1i> 
<li><a href="#"> 橘 子 </a></1i> 

<li data-role="1list-divider"> 乳 制品 </1i> 
<li><a href="#"> 酸 奶 </a></1i> 
<li><a href="#"> 奶 酪 </a></1i> 

</ul> 


在 模拟 器 中 的 预览 效果 如 图 18-29 所 示 。 





x 

标准 列表 样式 : = 2 
1 ie © i © 
2 机子 © ra 

a OR o eR © 
添加 data-inset="true" 属 性 后 的 样式 : E z 
F © ze 

= o am © 
w © Silt © 

18-28 ”有 边缘 和 圆 角 的 列表 效果 图 18-29 对 项 目 进行 分 隔 后 的 效果 


如 果 项 目 列表 是 一 个 按 字 母 顺序 排列 的 列表 ， 通 过 添加 data-autodividers="true" 属 性 ， 可 
以 自动 生成 项 目的 分 隔 。 代 码 如 下 : 


<ul data-role="listview" data-autodividers="true"> 
<li><a href="#">Avocado</a></1i> 
<li><a href="#"> Apricot</a></li> 
<li><a href="#">Banana</a></1i> 
<li><a href="#">Bramley</a></1i> 
<li><a href="#"> Cherry </a></1li> 
</ul> 


在 模拟 器 中 的 预览 效果 如 图 18-30 所 示 。 从 结果 可 以 看 出 ， 创 建 的 分 隔 文本 是 列表 项 文 
本 的 第 一 个 大 写字 母 。 
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18-30 自动 生成 分 隔 后 的 效果 


18.2.2 ”案例 6 一 一 列表 内 容 


在 列表 内 容 中 ， 既 可 以 添加 图 片 和 说 明 ， 也 可 以 添加 计数 泡 泡 ， 同 时 还 能 拆 分 按钮 和 列 
表 的 链接 。 


1. 加 入 图 片 和 说 明 


在 前 面 做 的 案例 中 ， 列 表 项 目前 没有 图 片 或 说 明 。 下 面 讲述 如 何 添加 图 片 和 说 明 。 代 码 
WTF: 


<li> 
<a href="#"> 
<img src="124.jpg"> 
<h3>##i</h3> 
<p> Br RE AY BRP Hh Fe As PIE </p> 
</a> 

</li> 


在 模拟 器 中 的 预览 效果 如 图 18-31 所 示 。 


W om b 


香 葵 的 原 产地 是 东南 亚 





18-31 加 入 图 片 和 说 明 
2. 加 入 计数 泡 泡 
计数 泡 泡 主要 是 在 列表 中 显示 数字 时 使 用 ， 只 需要 在 <li> 标 签 中 加 入 以 下 标签 即 可 : 
<span class="ui-1i-count"> 数 字 </span> 


例如 : 


< 
<a href="#"> 
<img src="124.jpg"> 
<h3>#Ri</h3> 
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<p> 香 燕 的 原 产地 是 东南 亚 </p> 
<span class="ui-li-count">111</span> 
</a> 

</li> 


在 模拟 器 中 的 预览 效果 如 图 18-32 所 示 。 


w ER 1 © 


SRNR ERLE 





18-32 ”加 入 计数 泡 泡 





3. 拆 分 按钮 和 列表 的 链接 


在 默认 情况 下 ， 单 击 列表 项 或 按钮 ， 都 是 转向 同一 个 链接 。 用 户 也 可 以 拆 分 按钮 和 列表 
项 的 链接 ， 这 样 单 击 按钮 和 列表 项 时 ， 会 转向 不 同 的 链接 。 设 置 方法 比较 简单 ， 只 需要 在 <li> 
标签 中 加 入 两 组 <a> 标 签 即 可 。 

例如 : 

i 

<a href="122.htm1l"> 
<img src="124.jpg"> 
<h3> 香 燕 </h3> 
<p> 香 燕 的 原 产地 是 东南 亚 </p> 
/a 
Be Cor data-icon="star"></a> 
</li> 


在 模拟 器 中 的 预览 效果 如 图 18-33 所 示 。 


W ox | 


香蕉 的 原 产地 是 东南 亚 





18-33 ” 拆 分 按钮 和 列表 的 链接 


18.2.3 ”案例 7 一 一 列表 过 滤 


在 jQuery Mobile 中 ， 用 户 可 以 对 列表 项 目 进行 搜索 过 滤 。 添 加 过 滤 效 果 的 具体 步骤 如 下 。 
(1) 创建 一 个 表单 ， 并 添加 类 ui-filterable， 该 类 的 作用 是 自动 调整 搜索 字段 与 过 滤 元 素 的 
外 边 距 。 代 码 如 下 : 


<form class="ui-filterable"> 
</form> 


(2) 在 <form> 标 签 内 创建 一 个 <input> 标 签 ， 并 添加 data-type="search" 属 性 ， 并 指定 id, 
从 而 创建 基本 的 搜索 字段 。 代 码 如 下 : 


<form class="ui-filterable"> 


e 
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<input id="myFilter" data-type="search"> = 
</form> a 
G) 为 过 滤 的 列表 添加 data-input 属性 ， 该 值 为 <input> 标 签 的 id。 代码 如 下 : 5 
<ul data-role="listview" data-filter="true" data-input="#myFilter"> 3 
= 
下 面 通 过 一 个 案例 来 理解 列表 是 如 何 过 滤 的 。 & 
【 例 18.7】 使 用 列表 过 滤 ( 实 例文 件 : ch18\18.7-html). < 
<!DOCTYPE html> 组 
<html> 件 
<head> 


<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet” 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile- 
1.4.5.min.js"></script> 
</head> 
<body> 
<div data-role="page" id="first"> 
<div data-role="content" class="content"> 
<h2> 进 货 商 联系 表 </h2> 
<form> 
<input id="myFilter" data-type="search"> 
</form> 
<ul data-role="listview" data-filter="true" data-input="#myFilter"> 
<li><a href="#"> 张 小 名 </a></1i> 
<li><a href="#"> 刘 名 园 </a></1i> 
<li><a href="#"> 刘 鲁 鹏 </a></1i> 
<li><a href="#"> 张 鹏 举 </a></1i> 
<li><a href="#"> 张 鹏 远 </a></1i> 
</ul> 
</div> 
</div> 
</body> 
</html> 


在 模拟 器 中 的 预览 效果 如 图 18-34 所 示 。 输 入 需要 过 滤 的 关键 字 ， 例 如 这 里 搜索 姓 张 的 
进货 商 ， 结 果 如 图 18-35 所 示 。 








进货 商 联系 表 

进货 商 联系 表 

张 小 名 © [a © 

wee © HE © 

nm © 

ams © ae © 

张 器 远 © XBZ © 
18-34 ”程序 预览 效果 18-35 ”列表 过 滤 后 的 效果 
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STE 如 果 需 要 在 搜索 框 内 添加 提示 信息 ， 可 以 通过 设置 placeholder 属性 来 完成 。 
K AN 代码 如 下 : 
<input id="myFilter" data-type="search" placeholder=" 请 输入 联系 人 的 
R "> 


au 
ae 


18.3 HRA A TBR 


在 jQuery Mobile H, TJ WGI MRR A ARREA ant EAA AEP Ed 
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18.3.1 案例 8 一 一 面板 


在 jQuery Mobile 中 可 以 添加 面板 ， 面 板 会 在 屏幕 上 从 左 到 右 划 出 。 通 过 为 <div> 标 签 添 
加 data-role="panel" 属 性 来 创建 面板 。 有 具体 方法 如 下 。 

(1) 通过 <div> 标 签 来 定义 面板 的 内 容 ， 并 定义 id 属性 。 例 如 以 下 代码 : 

<div data-role="panel" id="myPanel"> 


<h2> 长 恨 歌 </h2> 
<p> 天 生 丽质 难 自 弃 ， 一 朝 选 在 君王 侧 。 回 眸 一 笑 百 媚 生 ， 六 宫 粉 癸 无 颜色 。</P> 


</div> 





定义 的 面板 内 容 必 须 置 于 头 部 、 内 容 和 底部 组 成 的 页 面 之 前 或 之 后 。 


(2) 要 访问 面板 ， 需 要 创建 一 个 指向 面板 <div> 的 链接 ， 单 击 该 链接 即 可 打开 面板 。 例 如 
以 下 代码 : 


<a href="#myPanel" class="ui-btn ui-btn-inline"> 最 喜欢 的 诗句 </a> 


【 例 18.8】 创 建 指向 面板 的 链接 (实例 文件 ，ch18\18.8.html)。 


<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery-.mobile- 
1.4.5.min.js"></script> 
</head> 
<body> 
<div data-role="first"> 
<div data-role="panel" id="myPanel"> 
<h2> 长 恨 歌 </h2> 
<p> 天 生 丽 质 难 自 弃 ， 一 朝 选 在 君王 侧 。 回 眸 一 笑 百 媚 生 ， 六 宫 粉 念 无 颜色 。</p> 
</div> 
<div data-role="header"> 
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<h1> 使 用 面板 </h1> 
</div> 
<div data-role="content" class="content"> 
<a href="#myPanel" class="ui-btn ui-btn-inline"> 最 喜欢 的 诗句 </a> 
</div> 
</div> 
</body> 
</html> 


在 模拟 器 中 的 预览 效果 如 图 18-36 所 示 。 单 击 “ 最 喜欢 的 诗句 ” 超 链接 ， 即 可 打开 面 
板 ， 结 果 如 图 18-37 所 示 。 
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使 用 面板 
KRK 
最 喜欢 的 诗句 天 生 丽 质 难 自 弃 ， 一 朝 选 在 君王 
侧 。 回 眸 一 笑 百 媚 生 ， 六 宫 粉 葡 无 
颜色 。 
图 18-36 程序 预览 效果 18-37 ”打开 面板 


面板 的 展示 方式 由 属性 data-display 来 控制 ， 分 为 以 下 3 种 。 

(1) data-display="reveal": 面板 的 展示 方式 为 从 左 到 右 划 出 ， 这 是 面板 展示 方式 的 默 
认 值 。 

(2) data-display="overlay": 在 内 容 上 显示 面板 。 

(3) data-display="push": 同时 “推动 ”面板 和 页 面 。 

这 3 种 面板 展示 方式 的 代码 如 下 : 


<div data-role="panel" id="overlayPanel" data-display="overlay"> 
<div data-role="panel" id="revealPanel" data-display="reveal"> 
<div data-role="panel" id="pushPanel" data-display="push"> 


在 默认 情况 下 ， 面 板 会 显示 在 屏幕 的 左 侧 。 如 果 想 让 面板 出 现在 屏幕 的 右 侧 ， 可 以 指定 
data-position="right" 属性 。 代 码 如 下 : 

<div data-role="panel" id="myPanel" data-position="right"> 

在 默认 情况 下 ， 面 板 是 随 着 页 面 一 起 滚动 的 。 如 果 你 需要 实现 面板 内 容 固定 、 不 随 页 面 
滚动 而 滚动 ， 可 以 为 面板 添加 the data-position-fixed="true" 属 性 。 代 码 如 下 : 


<div data-role="panel" id="myPanel" data-position-fixed="true"> 








18.3.2 ”案例 9 一 一 可 折 又 块 


通过 可 折合 块 ， 用 户 可 以 隐藏 或 显示 指定 的 内 容 ， 这 对 于 存储 部 分 信息 很 有 用 。 
创建 可 折 对 块 的 方法 比较 简单 ， 只 需要 在 <div> 标 签 中 添加 data-role="collapsible" 属性 即 
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可 ， 添 加 标题 标签 为 H1-H6， 后 面 即 可 添加 隐藏 的 信息 。 


<div data-role="collapsible"> 
<hl> 折 码 块 的 标题 </h1> 
<p> 可 折 登 的 具体 内 容 。</p> 


</div> 


【 例 18.9】 创建 可 折 释 块 (实例 文件 ch18\18.9.html)。 


<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile- 
1.4.5.min.js"></script> 
</head> 
<body> 
<div data-role="first"> 
<div data-role="header"> 
<h1> 可 折合 块 </h1> 
</div> 
<div data-role="content" class="content"> 
<div data-role="collapsible"> 
<h1> 最 喜欢 的 水 果 </h1> 
<p> hk. Hit. SER</p> 
</div> 
</div> 
</div> 
</body> 
</html> 


在 模拟 器 中 的 预览 效果 如 图 18-38 tas. Pa “MK” A, BNP IP 
块 ， 结 果 如 图 18-39 所 示 。 





BEE g 
DEJE g 
© 最 喜欢 的 水 果 
O 最 喜欢 的 水 果 BR. MT. ER 
18-38 程序 预览 效果 18-39 打开 可 折叠 块 


ord ERIE, HERRER. HREZERGMRURAAS, & 
A 加 data-collapsed="false" 属 性 即 可 。 代 码 如 下 : 
<div data-role="collapsible" data-collapsed="false"> 
<h1> 折 巷 块 的 标题 </h1> 
<p> 这 里 显示 的 内 容 是 展开 的 </p> 


</div> 


HT ee VRE, BONA FRE: C aesena 

<div data-role="collapsible"> 手机 及 配件 
<h1> 全 部 智能 商品 </h1> sesm 

<div data-role="collapsible"> 

<h1> 智 能 家 居 </h1> sere 
<p> 智 能 办 公 、 智 能 厨 电 和 智能 网 络 </p> 智能 办 公 、 特 能 厨 电 和 各 能 网 络 
</div> 

</div> 


18-40 程序 预览 效果 
在 模拟 器 中 的 预览 效果 如 图 18-40 所 示 。 


18.4 RB 10 一 一 导航 条 


导航 条 通常 位 于 页 面 的 头 部 或 尾部 ， 主 要 作用 是 便于 用 户 快速 访问 需要 的 页 面 。 下 面 重 
点 学 习 导航 条 的 使 用 方法 和 技巧 。 
在 jQuery Mobile 中 ， 使 用 data-role="navbar" 属性 来 定义 导航 栏 。 需 要 特别 注意 的 是 ， 
导航 栏 中 的 链接 将 自动 变 成 按钮 ， 不 需要 使 用 data-role="button" 属 性 。 
例如 以 下 代码 : 
<div data-role="header"> 
<h1> 鸿 航 网 购 平台 </h1> 
<div data-role="navbar"> 
<ul> 
<li><a href="#"> 主 页 </a></1i> 
<li><a href="#"> 团 购 </a></1i> 
<li><a href="#"> 搜 索 商 品 </a></1i> 


</ul> 
</div> 
</div> 
在 模拟 器 中 的 预览 效果 如 图 18-41 所 示 。 
鸿 外 网 购 平台 
二 页 zi] 搜索 商品 


图 18-41 程序 预览 效果 
通过 前 面 章节 的 学 习 ， 用 户 还 可 以 为 导航 添加 按钮 图 标 ， 例 如 以 上 代码 修改 如 下 : 


<div data-role="header"> 
<h1> 鸿 鲍 网 购 平台 </h1> 
<div data-role="navbar"> 
<ul> 
<li><a href="#" data-icon="home"> 主 页 </a></1i> 
<li><a href="#" data-icon="arrow-d"> 团 购 </a></1i> 
<li><a href="#" data-icon="search"> 搜 索 商品 </a></1i> 
</ul> 
</div> 
</div> 
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在 模拟 器 中 的 预览 效果 如 图 18-42 所 示 。 


鸿 扑 网 购 平台 


#0 
© 
© 


18-42 ”程序 预览 效果 


细心 的 读者 会 发 现 ， 导 航 按钮 的 图 标 默 认 位 置 是 位 于 文字 的 上 方 ， 这 个 普通 的 按钮 图 片 
是 不 一 样 的 。 如 果 需 要 修改 导航 按钮 图 标的 位 置 ， 可 以 通过 设置 data-iconpos 属性 来 指定 位 
置 ， 包 括 left( 左 侧 )、right( 右 侧 ) 和 bottom( 底 部 )。 

例如 ， 下 面 修改 导航 按钮 图 标的 位 置 为 文本 的 左 侧 ， 代 码 如 下 : 

<div data-role="header"> 
<h1> 鸿 钼 网 购 平台 </h1> 


<div data-role="navbar" data-iconpos="left"> 
<ul> 





<li><a href="#" data-icon="home" > 主页 </a></1i> 
<li><a href="#" data-icon="arrow-d" > 团购 </a></1i> 
<li><a href="#" data-icon="search"> 搜 索 商品 </a></1i> 
</ul> 
</div> 


</div> 
在 模拟 器 中 的 预览 效果 如 图 18-43 所 示 。 


鸿 锥 网 购 平台 
O +m © way 


Q ppm 


18-43 ”程序 预览 效果 


> 和 设置 普通 按钮 图 标 位 置 不 同 的 是 ， 这 里 data-iconpos-"left" 属 性 只 能 添加 到 
用 总 <div> 标签 中 ， 而 不 能 添加 到 <li> 标 签 中 ， 否 则 是 无 效 的 ， 读 者 可 以 自行 检测 。 


在 默认 情况 下 ， 当 单 击 导 航 按钮 时 ， 按 钮 的 样式 会 发 生变 化 。 例 如 这 里 单 击 “搜索 商 
品 ” 导 航 按钮 ， 发 现 按钮 的 底 纹 颜 色 变 成 了 蓝 色 ， 如 图 18-44 所 示 。 


BERUFE 


O m o m E 


图 18-44 ”导航 按钮 的 样式 变化 


如 果 用 户 想 取消 上 面 的 样式 变化 ， 可 以 添加 class="ui-btn-active" 属 性 即 可 。 例 如 以 下 
代码 : 
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<li><a href="#anylink" class="ui-btn-active"> 首 页 </a></1i> 


修改 完成 后 ， 再 次 单 击 “ 首 页 ”导航 按钮 时 ， 样 式 不 会 发 生变 化 。 

对 于 多 个 页 面 的 情况 ， 往 往 用 户 希 望 显示 哪个 页 面 ， 对 应 导航 按钮 处 于 选中 状态 。 下 面 
通过 一 个 案例 来 讲解 。 

【 例 18.10】 对 应 于 显示 的 页 面 ， 导 航 按钮 处 于 选中 状态 (实例 文件 ，ch18\18.10.html)。 


<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet” 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile- 
1.4.5.min.js"></script> 
</head> 
<body> 
<div data-role="page" id="first"> 
<div data-role="header"> 
<hl> 鸿 秽 购 物 平 台 </h1> 
<div data-role="navbar"> 
<ul> 
<li><a href="#" class="ui-btn-active ui-state-persist">+W</a></li> 
<li><a href="#second"> 团 购 </a></1i> 
<li><a href="#"> 搜 索 商品 </a></1i> 
</ul> 
</div> 
</div> 
<div data-role="content" class="content"> 
<p> 这 里 是 首页 显示 的 内 容 </p> 
</div> 
<div data-role="footer"> 
<h1> 首 页 </h1> 
</div> 
</div> 


<div data-role="page" id="second"> 
<div data-role="header"> 
<h1> 鸿 钼 购物 平台 </h1> 
<div data-role="navbar"> 
<ul> 

<li><a href="#first"> 主 页 </a></1i> 
<li><a href="#" class="ui-btn-active ui-state-persist"> 团 购 </a></1i> 
<li><a href="#"> 搜 索 商 品 </a></1i> 


</ul> 

</div> 

</div> 

<div data-role="content" class="content"> 

<p> 这 里 是 团购 显示 的 内 容 </p> 
</div> 
<div data-role="footer"> 
<h1> 团 购 页 面 </h1> 
</div> 


a 
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</div> 
</body> 
</html> 


在 模拟 器 中 的 预览 效果 如 图 18-45 所 示 。 此 时 默认 显示 首页 的 内 容 ，“ 主 页 ”导航 按钮 


处 于 选中 状态 。 切 换 到 团购 页 面 后 ，“ 团 购 ” 导 航 按钮 处 于 选中 状态 ， 如 图 18-46 所 示 。 


鸿 鲍 购 物 平台 鸿 锥 购物 平台 
这 里 是 首页 显示 的 内 容 这 里 是 团购 显示 的 内 容 
首页 团购 页 面 
图 18-45 ”程序 预览 效果 图 18-46 “团购 ”导航 按钮 处 于 选中 状态 


18.5 ”综合 案例 一 一 使 用 jQuery Mobile 主题 


用 户 在 设计 移动 网 站 时 ， 往 往 需要 配置 背景 颜色 、 导 航 颜色 、 布 局 颜色 等 ， 这 些 工 作 是 


非常 耗费 时 间 的 。 为 此 ，jQuery Mobile 提供 两 种 不 同 的 主题 样式 ， 每 种 主题 颜色 的 按钮 、 导 


航 、 





he 


内 容 等 颜色 都 是 配置 好 的 ， 效 果 也 不 相同 。 
这 两 种 主题 分 别 为 a 和 b， 通 过 设置 data-theme 属性 来 引用 主题 a 或 b。 代 码 如 下 : 


<div data-role="page" id="first" data-theme="a"> 
<div data-role="page" id="first" data-theme="b"> 


1. 主题 a 
页 面 为 灰色 背景 、 黑 色 文字 ;， 头 部 与 底部 均 为 灰色 背景 、 黑 色 文字 ;按钮 为 灰色 背景 、 


虹 色 文字 ;激活 的 按钮 和 链接 为 白色 文本 、 蓝 色 背 景 ，input 输入 框 中 placeholder 属性 值 为 浅 


灰色 ，value 值 为 黑色 。 


下 面 通过 一 个 案例 来 讲解 主题 a 的 样式 效果 。 
【 例 18.11】 主题 a 的 样式 (实例 文件 : ch18\18.11.html)。 


<!DOCTYPE html> 

<html> 

<head> 

<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 

href="http: //code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery-mobile- 
1.4.5.min.js"></script> 

</head> 

<body> 

<div data-role="page" id="first" data-theme="a"> 


<div data-role="header"> 
<h1> 古 诗 鉴 赏 </h1> 


</div> 


<div data-role="content " class="content"> 
pier & 草木 黄 落 今 雁 南 归 。 兰 有 秀 今 菊 有 芳 ， 怀 佳人 今 不 能 忘 。 泛 楼 船 今 济 汾 河 ， 
中 流 今 扬 素 波 。</p> 
<a href="#"> 秋 风 辞 </a> 
<a href="#" class="ui-btn"> 更 多 古诗 </a> 
<p> 唐 诗 :</p> 
<ul data-role="listview" data-autodividers="true" data-inset="true"> 
<li><a href="#"> 将 进 酒 </a></1i> 
<li><a href="#"> 春 望 </a></1i> 
</ul> 
<label for="fullname"> 请 输入 喜欢 诗 的 名 字 :</label> 
称 <input type="text" name="fullname" id="fullname" placeholder=" 诗 词 名 
re 
<label for="switch"> 切 换 开 关 :</label> 
<select name="switch" id="switch" data-role="slider"> 
<option value="on">On</option> 
<option value="off" selected>Off</option> 
</select> 
</div> 


<div data-role="footer"> 
<h1> 经 典 诗歌 </h1> 
</div> 
</div> 
</body> 
</html> 


主题 a 的 样式 效果 如 图 18-47 所 示 。 


Ase 
秋风 起 兮 白云 飞 ， 草 木 贡 落 兮 雁 南 归 。 AROMAS , HEA 
SHES. 泛 楼 船 全 济 汾 河 ， 横 中 流 兮 扬 家 波 。 
une 
更 多 古诗 
ms: 
将 
将 进 酒 © 
春 
s2 © 
请 给 入 喜欢 诗 的 名 字 : 





图 18-47 主题 a 样式 效果 
2. 主题 b 
页 面 为 黑色 背景 、 白 色 文 字 ; 头 部 与 底部 均 为 黑色 背景 、 白 色 文字 ; 按钮 为 白色 文字 、 
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木炭 背景 ， 激活 的 按钮 和 链接 为 白色 文本 、 蓝 色 背 景 ， input 输入 框 中 placeholder 属性 值 为 浅 
灰色 、value 值 为 白色 。 

为 了 对 比 主题 a 的 样式 效果 ， 请 将 上 面 案例 中 的 代码 : 

<div data-role="page" id="first" data-theme="a"> 

修改 如 下 : 

<div data-role="page" id="first" data-theme="b"> 


主题 b 的 样式 效果 如 图 18-48 所 示 。 











WA , MEA 





图 18-48 ”主题 b 样式 效果 
主题 样式 a 和 b 不 仅仅 可 以 应 用 到 页 面 ， 也 可 以 单独 地 应 用 到 页 面 的 头 部 、 内 容 、 底 
部 、 导 航 条 、 按 钮 、 面 板 、 列 表 、 表 单 等 元 素 上 。 
例如 ， 将 主题 样式 b 添加 到 页 面 的 头 部 和 底部 。 代 码 如 下 : 


<div data-role="header" data-theme="b"></div> 
<div data-role="footer" data-theme="b"></div> 


将 主题 样式 b 添加 到 对 话 框 的 头 部 和 底部 。 代 码 如 下 : 


<div data-role="page" data-dialog="true" id="second"> 
<div data-role="header" data-theme="b"></div> 
<div data-role="footer" data-theme="b"></div> 
</div> 


将 主题 样式 b 添加 到 按钮 上 时 ， 需 要 使 用 class="ui-bin- ab "来 设置 按钮 颜色 为 灰色 或 黑 


| 


色 。 例 如 ， 将 主题 样式 b 应 用 到 按钮 上 ， 代 码 如 下 : 


<a href="#" class="ui-btn"> 灰 色 按钮 (默认 ) </a> 
<a href="#" class="ui-btn ui-btn-b"> 黑 色 按钮 </a> 


预览 效果 如 图 18-49 所 示 。 





灰色 按钮 默认 ) 


黑色 按钮 


18-49 ”按钮 添加 主题 样式 后 的 效果 
在 弹 窗 上 应 用 主题 样式 的 代码 如 下 : 
<div data-role="popup" id="myPopup" data-theme="b"> 


在 头 部 和 底部 的 按钮 上 也 可 以 添加 主题 样式 ， 例 如 以 下 代码 : 


<div data-role="header"> 
<a href="#" class="ui-btn ui-btn-b"> 主 页 </a> 
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<h1> 古 诗 欣 赏 </h1> 
<a href="#" class="ui-btn"> 搜 索 </a> 
</div> 


<div data-role="footer"> 
<a href="#" class="ui-btn ui-btn-b"> 上 传 古诗 图 文 </a> 
<a href="#" class="ui-btn"> 名 句 欣 赏 鉴别 </a> 
<a href="#" class="ui-btn ui-btn-b"> 联 系 我 们 </a> 
</div> 


预览 效果 如 图 18-50 所 示 。 
Bsa Ome 


清明 时 节 雨 纷纷 ， 路 上 行人 欲 叫 绪 。 人 问 酒家 何 处 有 ? 牧 昔 好 指 可 花 
H. 


[+ ream o ee 
图 18-50” 头 部 和 底部 的 按钮 添加 主题 样式 后 的 效果 
18.6 高 手 解 惑 


疑问 1: 如 何 制 作 一 个 后 退 按钮 ? 
答 : 如 果 需 要 创建 后 退 按钮 ， 请 使 用 data-rel="back" 属性 (这 会 忽略 锚 的 href 值 ): 


<a href="#" data-role="button" data-rel="back"> 返 回 </a> 


31® 


HTML 5 网 页 设计 
案例 课堂 (第 ?版 ) 
疑问 2: 如 何在 面板 上 添加 主题 样式 b? 
答 : 在 面板 上 添加 主题 样式 的 方法 比较 简单 。 代 码 如 下 : 


<div data-role="panel" id="myPanel" data-theme="b"> 


面板 添加 主题 样式 b 后 的 效果 如 图 18-51 所 示 。 





HR 


MAAS , TAREE 





点 击 以 下 按钮 打开 面板 。 


谁 知 盘 中 餐 “ 粒 粒 皆 六 苦 
谁 知 盘 中 餐 ， 粒 粒 皆 辛苦 。 打开 面板 





18-51 面板 添加 主题 样式 后 的 效果 
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第 19 章 
jQuery Mobile 
事件 


页 面 有 了 事件 就 有 了 “灵魂 ”， 可 见 事件 对 于 页 面 是 多 么 重要 。 这 是 因为 事件 
使 页 面具 有 动态 性 和 响应 性 ， 如 果 没 有 事件 将 很 难 完 成 页 面 与 用 户 之 间 的 交互 。 
jQuery Mobile 针对 移动 端 提供 了 各 种 浏览 器 事件 ， 包 括 页 面 事件 、 触 摸 事件 、 滑 动 
事件 、 定 位 事件 等 。 本 章 介 绍 如 何 使 用 jQuery Mobile 的 事件 。 


重点 案例 效果 


FT 
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可 爱 宠物 ie 
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经 典 诗词 
sg 
d a 
向 右 滑动 图 片 查看 效果 Sane 
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19.1 页 面 事 件 


jQuery Mobile 针对 各 个 页 面 生命 周期 的 事件 可 以 分 为 以 下 几 种 。 

(1) 初始 化 事件 。 分 别 在 页 面 初始 化 之 前 ， 页 面 创建 时 和 页 面 初始 化 之 后 触发 的 事件 。 

(2) 外 部 页 面 加 载 事 件 。 外 部 页 面 加 载 时 触发 事件 。 

(3) 页 面 过 渡 事 件 。 页 面 过 渡 时 触发 事件 。 

使 用 jQuery Mobile 事件 的 方法 比较 简单 ， 只 需要 使 用 on0 方 法 指定 要 触发 的 时 间 并 设 定 
事件 处 理 函数 即 可 ， 语 法 格式 如 下 : 

$ (document) .on (事件 名 称 ,选择 器 , 事件 处 理 函数 ) 

其 中 选择 器 可 选 参数 ， 如 果 省 略 该 参数 ， 表 示 事 件 应 用 于 整个 页 面 而 不 限定 哪 一 个 
组 件 。 


19.1.1 案例 1 一 一 初始 化 事件 


初始 化 事件 发 生 的 时 间 包括 页 面 初始 化 之 前 、 页 面 创建 时 和 页 面 创建 后 。 下 面 详细 介绍 
初始 化 事件 。 


1. Mobileinit 

“4 jQuery Mobile 开始 执行 时 ， 首 先 会 触发 mobileinit 事件 。 如 果 想 更 改 jQuery Mobile 的 
默认 值 ， 就 可 以 将 函数 绑 定 到 mobileinit 事件 。 其 语法 格式 如 下 : 

$ (document) .on("mobileinit", function () { 

// jQuery 事件 

ERE 

例如 ，jQuery Mobile 开始 执行 任何 操作 时 都 会 使 用 Ajax 的 方式 。 如 果 不 想 使 用 Ajax， 
可 以 在 mobileinit 事件 中 将 $.mobile.ajaxEnabled 更 改 为 false， 代 码 如 下 : 


$ (document) .on("mobileinit", function () { 
$.mobile.ajaxEnabled=false; 
he 


这 里 需要 注意 的 是 ， 上 面 的 代码 要 放 在 引用 jquery.mobile.js 之 前 。 
2. jQuery Mobile Initialization 事件 





jQuery Mobile Initialization 事件 主要 包括 pagebeforecreate 事件 、pagecreate 事件 和 
pageinit 事件 ， 它 们 的 区 别 如 下 。 
(1) pagebeforecreate 事件 : 发 生 在 页 面 DOM 加 载 后 ， 正 在 初始 化 时 。 语 法 格式 如 下 : 


$ (document) .on("pagebeforecreate", function(){ 
// 程序 语 
be 


(2) pagecreate 事件 : 发 生 在 页 面 DOM 加 载 完 成 ， 初 始 化 也 完成 时 。 语 法 格式 如 下 : 


-i 


$ (document) .on("pagecreate", function(){ 
// 程序 语句 
He 


(3) pageinit 事件 : 发 生 在 页 面 初始 化 完成 以 后 。 语 法 格式 如 下 : 


$ (document) .on ("pageinit", function (){ 
// 程序 语句 
We 


下 面 通过 一 个 综合 案例 来 学 习 上 面 3 个 事件 触发 的 时 机 。 
【 例 19.1】 初始 化 事件 的 触发 (实例 文件 ，ch19\19.1.html)。 


<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile- 
1.4.5.min.js"></script> 
<script> 
$ (document) .on ("pagebeforecreate", function () { 
alert ("{EM: pagebeforecreate 事件 开始 触发 ") ; 
We 
$ (document) .on("pagecreate", function () { 
alert ("注意 ;pagecreate 事件 开始 触发 ") ; 
}) 
$ (document) .on("pageinit", function() { 
alert ("注意 ; pageinit 事件 开始 触发 ") ; 
We 
</script> 
</head> 
<body> 
<div data-role="page" id="first"> 
<div data-role="header"> 
<hl> 古 诗 欣 赏 </h1> 
</div> 
<div data-role="main" class="ui-content"> 
<p>JLBIE FERR, HILAL AE. </p> 
<a href="#second"> 下 一 页 </a> 
</div> 
<div data-role="footer"> 
<h1> 清 代 诗人 </h1l> 
</div> 
</div> 
<div data-role="page" id="second"> 
<div data-role="header"> 
<h1> 古 诗 欣赏 </h1> 
</div> 
<div data-role="main" class="ui-content"> 
<p> 似 此 星辰 非 昨夜 ， 为 谁 风 露 立 中 宵 。</p> 
<a href="#first"> 上 一 页 </a> 
</div> 
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<div data-role="footer"> 
<h1> 经 典 诗词 </h1> 
</div> 
</div> 
</body> 
</html> 


在 模拟 器 中 预览 程序 的 效果 ， 各 个 事件 的 执行 顺序 如 图 19-1 所 示 。 三 次 单 击 “确认 ” 按 
钮 后 ， 结 果 如 图 19-2 所 示 。 














localhost 
注意 : pagebeforecreate 事 件 开始 触发 
确认 古诗 欣赏 
AN | 
几 回 花 下 坐 吹 第 ， 银 汉 红 墙 入 望 退 。 
localhost 
下 一 页 
注意 : pagecreate 事 件 开始 触发 
确认 经 典 诗词 
localhost 
注意 ; pageinit 事 件 开始 触发 
Citar 180696 P: 233 四 [107% >] 
19-1 初始 化 事件 19-2 ”页 面 最 终 效果 


19.1.2 “案例 2 一 一 外 部 页 面 加 载 事 件 


外 部 页 面 加 载 时 ， 最 常见 的 加 载 事 件 如 下 。 
1. pagebeforeload 事件 
pagebeforeload 事件 在 外 部 页 面 加 载 前 触发 。 语 法 格式 如 下 : 


<script> 

$ (document) .on("pagebeforeload", function () { 
alert ("有 外 部 文件 将 要 被 加 载 ) ; 

We 

</script> 


2. pageload 事件 
当 页 面 加 载 成 功 时 ， 触 发 pageload 事件 。 语 法 格式 如 下 : 


<script> 

$ (document) .on("pageload", function (event, data) { 
alert ("pageload 事件 触发 ! \nURL: " + data.url); 

he 

</script> 
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pageload 事件 函数 的 参数 含义 如 下 。 

(1) event: 任何 JQuery 的 事件 属性 ， 如 event.type、event.pageX 和 target 等 。 
(2) data: 包含 以 下 属性 。 

O ul: 页 面 的 wl 地址， 是 字符 串 类 型 。 

@ absUrl: 绝对 地 址 ， 是 字符 串 类 型 。 

@ dataUrl: 地 址 栏 URL， 是 字符 串 类 型 。 

@ options: $mobile loadPage0 指 定 的 选项 ， 是 对 象 类 型 。 

© xhr: XMLHttpRequest 对 象 ， 是 对 象 类 型 。 

© textStatus: 对 象 状 态 或 空 值 ， 返 回 状态 。 


3. pageloadfailed 事件 


如 果 页 面 载 入 失败 ， 触 发 pageloadfailed 事件 。 默 认 地 ， 将 显示 "Error Loading Page" 消 
语法 格式 如 下 : 


$ (document) .on("pageloadfailed", function (event, data) { 
alert ("HIR, BGPRAMAEE. "); 

We 

</script> 


下 面 通过 一 个 例子 来 理解 上 述 事件 触发 时 机 。 
【 例 19.2】 触发 pageloadfailed 事件 (实例 文件 ，ch19\19.2.html)。 


<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile- 
1.4 5.min.js%></scripe> 
<script> 
$ (document) .on("pageload", function (event, data) { 
alert ("pageload 事件 触发 ! \nURL: " + data.url); 
1); 
$ (document) .on("pageloadfailed", function () { 
alert ("抱歉 ， 被 请 求 页 面 不 存在 。") ; 
he 
</script> 
</head> 
<body> 
<div data-role="page" id="first"> 
<div data-role="header"> 
<hl> 古 诗 欣 赏 </h1> 
</div> 
<div data-role="content" class="content"> 
<p Sm CS, MERE. MAAR, RAMI. </p> 
<a href="123.html"> 下 一 页 </a> 
</div> 
<div data-role="footer"> 
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<h1> 经 典 诗词 </h1> 
</div> 
</div> 
</body> 
</html> 
在 模拟 器 中 的 预览 效果 如 图 19-3 所 示 。 单 击 “ 下 一 页 ” 超 链 接 ， 结 果 如 图 19-4 所 示 。 
古诗 欣赏 古诗 欣赏 
众 鸟 高 飞 尽 ， 孤 云 独 去 闲 。 众 岛 高 飞 尽 . 孤 云 独 去 闲 - 
相 看 两 不 大 ， 只 有 冤 亭 山 。 localhost 
抱 欢 ， 被 请 求 页 面 不 存在 。 
下 一 页 
确认 
经 典 诗 词 
19-3 ”程序 预览 效果 19-4 触发 pageloadfailed 事件 


19.1.3 ”案例 3 一 一 页 面 过 渡 事件 


在 jQuery Mobile 中 ， 在 当前 页 面 过 渡 到 下 一 页 时 ， 会 触发 以 下 几 个 事件 。 
(1) pagebeforeshow 事件 : 在 当前 页 面 触发 ， 在 过 渡 动 画 开始 前 。 

(2) pageshow 事件 : 在 当前 页 面 触发 ， 在 过 渡 动 画 完 成 后 。 

(3) pagebeforehide 事件 ， 在 下 一 页 触发 ， 在 过 渡 动 画 开 始 前 。 

(4) pagehide 事件 : 在 下 一 页 触发 ， 过 渡 动 画 完成 后 。 

下 面 通过 一 个 案例 来 学 习 页 面 过 渡 事 件 的 触发 时 机 。 

【 例 19.3】 页 面 过 渡 事 件 的 触发 (实例 文件 : ch19\19.3.html)。 


<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile- 
1.4.5.min.js"></script> 
<script> 
$ (document) .on("pagebeforeshow", "#second", function () { 
alert ("ft pagebeforeshow 事件 ， 下 一 页 即将 显示 ") ; 
]) 
$ (document) .on ("pageshow", "#second", function () { 
alert ("触发 pageshow 事件 ， 现 在 显示 下 一 页 ") ; 
Ha 
$ (document) .on("pagebeforehide", "#second", function (){ 
alert ("触发 pagebeforehide 事件 ， 下 一 页 即将 隐藏 ") ; 
he 
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$ (document) .on("pagehide", "#second", function () { 
alert ("触发 pagehide 事件 ， 现 在 隐藏 下 一 页 ") ; 
})#</script> 
</head> 
<body> 
<div data-role="page" id="first"> 
<div data-role="header"> 
<h1> 古 诗 欣 赏 </h1> 
</div> 
<div data-role="content" class="content"> 
<p> WAM PS, FSSA. PARE, AWK. </p> 
<a href="#second"> 下 一 页 </a> 
</div> 
<div data-role="footer"> 
<h1> 经 典 诗词 </h1> 
</div> 
</div> 
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<div data-role="page" id="second"> 
<div data-role="header"> 
<hl> 古 诗 欣 赏 </h1> 
</div> 
<div data-role="content" class="content"> 
<p Sm OS, MERE. MAAR, RAMI. </p> 
<a href="#first"> 上 一 页 </a> 
</div> 
<div data-role="footer"> 
<h1> 经 典 诗词 </h1> 
</div> 
</div> 
</body> 
</html> 


在 模拟 器 中 的 预览 效果 如 图 19-5 所 示 。 单 击 “ 下 一 页 ” 超 链接 ， 事 件 触 发 顺序 如 图 19-6 
所 示 。 





localhost 


触发 pagebeforeshow 事件 , 
下 一 页 即将 显示 


| 


古诗 欣赏 


Beas , HRSA. 
阳春 布 德 泽 ， 万 物 生 光辉 。 








localhost 
下 一 页 触发 pageshow 事件 ， 现 在 显 
示 下 一 页 
amsa 
19-5 程序 预览 效果 19-6 ”当前 页 面 触发 事件 顺序 


单 击 “ 确 认 ” 按 钮 ， 进 入 下 一 页 中 ， 如 图 19-7 所 示 。 单 击 “ 上 一 页 ” 超 链接 ， 事 件 触 发 
顺序 如 图 19-8 所 示 。 
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古诗 欣赏 localhost 
触发 pagebeforehide BH , 
下 一 页 即将 隐藏 
众 岛 高 飞 尽 ， 孤 云 独 去 闲 。 zi 
BEATA , RARE. | 
上 一 页 localhost 
触发 pagehide 事件 ， 现 在 隐 
藏 下 一 页 
经 典 诗 词 确认 
图 19-7 ”程序 预览 效果 图 19-8 下 一 页 触发 事件 顺序 


19.2 触摸 事件 


针对 移动 端 浏 览 器 提供 了 触摸 事件 ， 表 示 当 用 户 触摸 屏幕 时 触发 的 事件 ， 包 括 点 击 事件 


和 滑动 事件 。 
19.2.1 案例 4 一 一 点 击 事件 


点 击 事件 包括 tap 事件 和 taphold 事件 。 下 面 详细 介绍 它们 的 用 法 和 区 别 。 
1.tap 事件 
当 用 户 点 击 页 面 上 的 元 素 时 ， 会 触发 点 击 (tap) 事 件 ， 语 法 格式 如 下 : 


$("p") .on("tap", function(){ 
$(this) .hide(); 
he 


上 述 代码 作用 是 点 击 p 组 件 后 ， 将 会 将 该 组 件 隐藏 。 
下 面 通 过 一 个 案例 来 讲解 点 击 事件 的 使 用 方法 。 
【 例 19.4】 点 击 事件 的 使 用 (实例 文件 : ch19\19.4.htmD。 


<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile- 
1.4.5.min.js"></script> 
<script> 
$ ("div") .on("tap", function () { 

$ (this) .css("color", "green") ; 


bin 


的 颜色 变 成 了 绿色 ， 如 图 19-10 所 示 。 


o 


</script> 
</head> 
<body> 
<div data-role="page" id="first"> 
<div data-role="header"> 
<h1> 古 诗 欣 赏 </h1> 
</div> 
<div data-role="content" class="content"> 
<p> 黄 师 塔 前 江水 东 ， 春 光 懒 困 倚 微风 。 桃 花 一 簇 开 无 主 ， 可 爱 深 红 爱 浅 红 。</p> 
</div> 
<div data-role="footer"> 
<h1> 经 典 诗词 </h1> 
</div> 
</div> 
</body> 
</html> 


在 模拟 器 中 的 预览 效果 如 图 19-9 所 示 。 在 页 面 中 诗词 上 面 点 击 ， 即 可 发 现 div 块 内 文字 


€i 

第 
è 
章 
5 
5 

< 

= 
& 
o 
事 
件 














古诗 欣赏 古诗 欣赏 
黄 师 塔 前 江水 东 ， 春 光 懒 困 倚 微 风 。 黄 师 塔 前 江水 东 ， 春 光 懒 因 倚 微风 。 
桃花 一 禾 开 无 主 ， 可 爱 深 红 爱 浅 红 。 桃花 一 族 开 无 主 ， 可 爱 深 红 爱 浅 红 。 
经 典 诗词 经 典 诗词 
图 19-9 程序 预览 效果 图 19-10 触发 tap 事件 


2.taphold 
如 果 点 击 页 面 并 按 住 不 放 ， 则 会 触发 taphold 事件 。 语 法 格式 如 下 : 


$("p") .on("taphold", function () { 
$(this) .hide(); 

}) 

在 默认 情况 下 ， 按 住 不 放 750ms 之 后 触发 taphold 事件 。 用 户 也 可 以 修改 这 个 时 间 的 长 

语法 格式 如 下 : 

$ (document) .on("mobileinit", function () { 
$.event.special.tap.tapholdThreshold=5000; 

pies 

修改 后 需要 按 住 5 秒 以 后 才 会 触发 taphold 事件 。 

【 例 19.5] 触发 taphold 事件 (实例 文件 : ch19\19.5.html)。 


<!DOCTYPE html> 

<html> 

<head> 

<meta name="viewport" content="width=device-width, initial-scale=1"> 
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<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile— 
1.4.5.min.js"></script> 
<script> 
$ (document) .on("mobileinit", function () { 

$.event.special.tap.tapholdThreshold=1000 
We 
$(function () { 

$ ("img") .on("taphold", function () { 

$(this) -hide(); 
H); 
We 
</script> 
</head> 
<body> 
<div data-role="page" id="first"> 

<div data-role="header"> 

<h1> 可 爱 宠物 </h1> 

</div> 

<div data-role="content" class="content"> 
<img src=19.1.jpg > <br> 

<p> 按 住 图 片 1 秒 后 隐藏 图 片 哦 ! </p> 
</div> 
<div data-role="footer"> 
<h1> 动 物 天 地 </h1> 

</div> 
</div> 
</body> 
</html> 


在 模拟 器 中 的 预览 效果 如 图 19-11 所 示 。 点 击 图 片 1 秒 后 ， 即 可 发 现 图 片 被 隐藏 了 ， 如 
图 19-12 所 示 。 








可 爱 宠物 
SEIS RARER EEA 1 AA ! 
动物 天 地 动物 天 地 
19-11 程序 预览 效果 19-12 触发 taphold 事件 


19.2.2 案例 5 一 一 滑动 事件 
滑动 事件 是 在 用 户 1 秒 内 水 平 拖 自 大 于 30px, REA EREE 20px 的 事件 发 生 时 触发 


O32 


的 事件 。 滑 动 事件 使 用 swipe 语法 来 捕捉 。 语 法 格式 如 下 : 


$("p") -on("swipe", function (){ 
$ ("span") .text ("滑动 检测 !") ; 
be 


上 述 语 法 是 捕捉 p 组 件 的 滑动 事件 ， 并 将 消息 显示 在 span 组 件 中 。 
向 左 滑动 事件 在 用 户 向 左 拖 动 元 素 大 于 30px 时 触发 ， 使 用 swipeleft 语法 来 捕捉 、 语 法 格 
式 如 下 : 


$("p") .on("swipeleft", function () { 
$ ("span") .text ("向 左 滑动 检测 !"); 
FNF 


向 右 滑 动 事件 在 用 户 向 右 拖 动 元 素 大 于 30px 时 触发 ， 使 用 swiperight 语法 来 捕捉 。 语 法 
格式 如 下 : 


$("p") .on("swiperight,function()1{ 
$ ("span") .text(" 向 右 滑 动 检测 !") ; 
这 


下 面 以 向 右 滑动 事件 为 例 进行 讲解 。 
【 例 19.6】 触发 向 右 滑动 事件 (实例 文件 ，ch19\19.6.html)。 


<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile- 
1.4.5.min.js"></script> 
<script> 
$ (document) .on("pagecreate", "#first", function() { 
$("img") .on("swiperight", function() { 
alert (" 干 嘛 向 右 滑动 我 ! 1"); 
he 
We 
</script> 
</head> 
<body> 
<div data-role="page" id="first"> 
<div data-role="header"> 
<hl> 可 爱 宠物 </h1> 
</div> 
<div data-role="content" class="content"> 
<img src=19.2.jpg > <br> 
<p> 向 右 滑动 图 片 查 看 效果 </p> 
</div> 
<div data-role="footer"> 
<h1> 动 物 天 地 </h1> 
</div> 
</div> 
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</body> 
</html> 


在 模拟 器 中 的 预览 效果 如 图 19-13 所 示 。 向 右 滑动 图 片 ， 效 果 如 图 19-14 所 示 。 
可 爱 宠物 可 爱 宠物 





localhost 
干 嘛 向 右 滑动 我 ! 





向 右 滑动 图 片 查看 效果 向 右 滑动 图 片 查看 效果 
图 19-13 ”程序 预览 效果 图 19-14 触发 向 右 滑动 事件 





19.3 ”案例 6 一 一 滚屏 事件 


jQuery Mobile 提供 了 两 种 滚屏 事件 ， 分 别 是 滚屏 开始 时 触发 Scrollstart 事件 和 滚屏 结束 
时 触发 Scrollstop 事件 。 


1. Scrollstart 事件 
scrollstart 事件 是 在 用 户 开 始 滚动 页 面 时 触发 。 语 法 格式 如 下 : 


$ (document) .on("scrollstart", function () { 
alert (" 屏 幕 开始 滚动 了 !") ; 
he 


下 面 通过 一 个 案例 来 理解 Scrollstart 事件 。 
【 例 19.7】 触发 Scrollstart 事件 (实例 文件 ，ch19\19.7.html)。 


<!DOCTYPE html> 

<html> 

<head> 

<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 

href="http: //code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile- 
1.4.5.min.js"></script> 

<script> 

$ (document) .on("pagecreate", "#first", function () { 


$ (document) .on("scrollstart", function () { 


alert ("屏幕 开始 滚动 了 !") ; 
Ha 
}); 
</script> 
</head> 
<body> 


<div data-role="page" id="first"> 


<div data-role="header"> 
<h1> 古 诗 欣赏 </h1> 
</div> 
<div data-role="content" 
<p> 西 施 越 溪 女 ， 出 自 艺 萝 山 。 
<p> 秀 色 掩 今 古 ， 荷 花 羞 玉 颜 。 
<p> 浣 纱 弄 碧水 ， 自 与 清 波 闲 。 
<p> titi IT, Wizz TA. 
<p> 勾 践 征 绝 艳 ， 扬 蛾 入 吴 关 。 
<p> 提 携 馆 娃 宫 ， 查 渺 诺 可 攀 。 
<p> 一 破 夫差 国 ， 千 秋 竟 不 还 。 
<p> FURR, WAM. 
<p> 秀 色 掩 今 古 ， 荷 花 着 玉 颜 。 
<p> 浣 纱 弄 碧水 ， 自 与 清 波 闲 。 
<P>A RRE MAZE. 
<p> 勾 践 征 绝 艳 ， 扬 蛾 入 吴 关 。 
<p> 提 携 馆 娃 宫 ， 查 涉 谍 可 攀 。 
<p> 一 破 夫差 国 ， 千 秋 竟 不 还 。 
</div> 
<div data-role="footer"> 
<h1> 经 典 诗词 </h1> 
</div> 
</div> 
</body> 
</html> 


class="content"> 
</p> 
</p> 
</p> 
</p> 
</p> 
</p> 
</p> 
</p> 
</p> 
</p> 
</p> 
</p> 
</p> 
</p> 


在 模拟 器 中 的 预览 效果 如 图 19-15 所 示 。 向 上 滚动 屏幕 ， 效 果 如 图 19-16 所 示 。 


ER 





古诗 欣赏 


西施 越 溪 女 ， 出 自若 葛 山 
BERSE, MEREM. 
ROARS , ASMAA 
MADER , THBaE. 
勾践 币 绝 艳 ， 扬 蛾 人 吴 关 
MEE , AWETE, 
RZE, FARE 
西施 越 溪 女 ， 出 自 芝 葛 山 。 








P% oO g -^ 


Onton aaa 996233 (By (00% =) 











19-15 ”程序 预览 效果 


Co Gm | 


西施 越 溪 女 ， 出 自 艺 萝 山 。 
秀色 掩 今 古 ， 荷 花 着 玉 颜 。 
ROFEK, BSR, 
men mmama 
localhost 
DA 屏 得 开始 滚动 了 ! 
RR 确认 
BREE TREE 
西施 越 溪 女 ， 出 自 艺 萝 山 。 
ROME, AGEREM. 
RORBK, BSB, 


Canton arnt 223 [n] 00%] 


19-16 触发 Scrollstart 事件 
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2. Scrollstop 事件 
Scrollstop 事件 是 在 用 户 停止 深 动 页 面 时 触发 。 语 法 格式 如 下 : 


$ (document) .on("scrollstop",function(){ 
alert ("停止 滚动 !"); 
Ds 


下 面 通过 一 个 案例 来 理解 Scrollstop 事件 。 
【 例 19.8】 触发 Scrollstop 事件 (实例 文件 : ch19\19.8.html)。 


<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile- 
1.4.5.min.js"></script> 
<script> 
$ (document) .on("pagecreate", "#first", function() { 
$ (document) .on("scrollstop", function () { 
alert (" 屏 幕 已 经 停止 滚动 了 !") ; 
We 
]) 
</script> 
</head> 
<body> 
<div data-role="page" id="first"> 
<div data-role="header"> 
<hl> 古 诗 欣 赏 </h1> 
</div> 
<div data-role="content" class="content"> 
<p>E, EPAR! </p> 
<p> 蜀 道 之 难 ， 难 于 上 青天 ! </p> 
<p> 蛋 从 及 鱼 鬼 ， 开 国 何 茫然 ! </p> 
<p> 尔 来 四 万 八 千岁 ， 不 与 秦 塞 通 人 烟 。</p> 
<p> 西 当 太 白 有 鸟 道 ， 可 以 横 绝 峨 崩 贬 。</p> 
<p> HEEL, RRA RTT IE. </p> 
<p> 上 有 六 龙 回 日 之 高 标 ， 下 有 冲 波 逆 折 之 回 川 。</p> 
<p> 黄 稚 之 飞 尚 不 得 过 ， 猿 狐 欲 度 悉 攀 援 。</p> 
<p> 青 泥 何 盘 盘 ， 百 步 九 折 蒙 岩 帘 。</p> 
<p> 扣 参 历 井 仰 胁 息 ， 以 手 抚 诠 坐 长 叹 。</p> 
<p> 问 君 西游 何 时 还 ? Beis AnH. </p> 
<p> 但 见 翡 鸟 号 古木 ， 雄 飞 从 上 肉 绕 林 间 。</p> 
<p> FURL, WEU. </p> 
<p> 蜀 道 之 难 ， 难 于 上 青天 ， 使 人 听 此 凋 朱 颜 。</p> 
<p> 连 峰 去 天 不 春 尺 ， 枯 松 倒挂 倚 绝 壁 。</p> 
<p> KMENE, MERAJ. </p> 
<P Hak, ERTZA, ARR. </p> 
<p> Si) RRT EH, RHK, RAF. </p> 
<p> PTF RHE, (ARS. </p> 
<NE. SEKE, EFRI, AWR. </p> 
<p> 锦 城 虽 云 乐 ， 不 如 早 还 家 。</p> 


fi > 





第 
<P RČ, FEER WAIRAKA. </p> z 
</div> 章 
<div data-role="footer"> 
<h1> 经 典 诗词 </h1> 5 
</div> 5 
</div> z 
</body> 3 
</html> z 
在 模拟 器 中 的 预览 效果 如 图 19-17 所 示 。 向 上 滚动 屏幕 ， 停 止 后 效果 如 图 19-18 所 示 。 z 
era Mobile ~ Custo = [M Opera = Custom =r 
古诗 欣赏 上 有 六 龙 回 日 之 高 标 ， 下 有 冲 波 逆 折 之 回 
川 。 
吐 吁 器 ， 危 乎 高 哉 ! 黄 准 之 飞 尚 不 得 过 ， 获 狐 欲 度 秋 攀援 。 
蜀 道 之 难 ,难于 上 青天 ! 青 泥 何 熏 盘 ， 百 步 九 折 荣 岩 蛮 。 
TARAR ， 开 国 何 茫然 ! 118 localhost 
y ag 屏幕 已 经 停止 滚动 了 ! 
尔 来 四 万 八 千岁 ， 不 与 秦 塞 通 人 烟 。 
| 
BSAA SE , ADR BURUAA. Se 




















地 崩 山 摧 壮 士 死 ， 然 后 天 梯 石 栈 方 钧 连 。 ROFRBRA , SEU, 
上 有 六 龙 回 日 之 高 标 ,下 有 冲 波 逆 折 之 回 penta cellar 
Jil - 
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19.4 案例 7 一 一 定位 事件 


当 移 动 设 备 水 平 或 垂直 翻转 时 触发 定位 事件 ， 也 就 是 常 说 的 方向 改变 (orientationchange) 
事件 。 

在 使 用 定位 事件 时 ， 请 将 orientationchange 事件 绑 定 到 window 对 象 上 。 语 法 格式 如 下 : 

$ (window) .on("orientationchange", function (event) { 

alert ("设备 的 方向 改变 为 "+ event.orientation) ; 

he 

这 里 的 event 对 象 用 来 接收 orientation 属性 值 ， 用 event.orientation 返回 的 是 设备 是 水 平 还 
是 垂直 ， 类 型 为 字符 串 。 如 果 是 横向 ， 返 回 值 为 landscape; 如 果 是 纵向 ， 返 回 值 为 portrait。 

下 面 通过 一 个 案例 来 理解 orientationchange 事件 。 

【 例 19.9】 定位 事件 的 触发 (实例 文件 :ch19\19.9.html)。 


<!DOCTYPE html> 
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<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script sr http: //code.jquery.com/jquery-1.11.3.min.js"></script> 
<script sr http: //code.jquery.com/mobile/1.4.5/jquery.mobile- 
1.4.5.min.js"></script> 
<script type="text/javascript"> 
$ (document) .on("pageinit", function (event) { 
$( window ).on( "orientationchange", function( event ) { 
if (event.orientation == "landscape") 
$( "#orientation" ) .text ("现在 是 水 平 模式 !" ) .css ({"background- 
color": "yellow", "font-size" :"300%"}); 
if (event.orientation == "portrait") 
$( "#orientation" ).text( "现在 是 垂直 模式 !"” ) -Css({"background- 
color": "green", "Font-size™:"200%"}) ; 
be 
}) 
</script> 
</head> 
<body> 
<div data-role="page" id="first"> 
<div data-role="header"> 
<h1> 古 诗 欣赏 </h1> 
</div> 
<div data-role="content" class="content"> 
<span id="orientation"></span><br> 
<p>, RRR. KAMA, RM. BADIA, (AP </p> 
</div> 
<div data-role="footer"> 
<h1> 经 典 诗词 </h1> 
</div> 
</div> 
</body> 
</html> 


在 模拟 器 中 的 预览 效果 如 图 19-19 所 示 。 单 击 模拟 器 上 的 方向 改变 按钮 
变 为 水 平方 向 ， 效 果 如 图 19-20 所 示 。 
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再 次 单 击 模拟 器 上 的 方向 改变 按钮 图， 此 时 方向 改变 为 垂直 方向 ， 效 果 如 图 19-21 所 示 。 
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疑问 1: 绑 定 事件 的 方法 on() 和 one() 的 区 别 ? 


答 : 绑 定 事件 的 方法 on0 和 oneO 的 作用 相似 ， 它 们 唯一 的 区 别 在 于 oneO 只 能 执行 一 次 。 
例如 ， 当 在 按钮 上 绑 定单 击 鼠 标 事件 时 ，on() 方 法 的 程序 如 下 : 
<script> 
$ (document) .on('click', function () { 
alert ("这 是 使 用 on () 方法 绑 定 的 事件 ") 


We 
</script> 


疑问 2: 如 何在 设备 方向 改变 时 获取 移动 设备 的 高 度 和 宽度 ? 
答 : 如 果 设 备 方向 改变 时 要 获取 移动 设备 的 高 度 和 宽度 ， 可 以 绑 定 resize 事件 。 该 事件 
在 页 面 大 小 改变 时 将 触发 ， 语 法 如 下 : 


$ (window) .on("resize", function () { 

var win= $(this); //this 指 的 是 window 

alert (" 宽 度 为 "+win .width () +" 高 度 为 "+ win-height ()); 
he 
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20.1 Web SQL Database 概述 


Web SQL Database 是 关系 型 数据 库 系 统 ， 使 用 SQLLite 语法 访问 数据 库 ， 支 持 大 部 分 浏 
览 器 ， 该 数据 库 多 集中 在 嵌入 式 设备 上 。 
Web SQL Database 数据 库 中 定义 的 3 个 核心 方法 如 下 。 
(1) openDatabase: 这 个 方法 使 用 现 有 数据 库 或 新 建 数据 库 来 创建 数据 库 对 象 。 
(2) executeSql: 这 个 方法 用 于 执行 SQL 查询 。 
(3) transaction: 这 个 方法 允许 用 户 根据 情况 控制 事务 提交 或 回 滚 。 
在 Web SQL Database 中 ， 用 户 可 以 打开 数据 库 并 进行 数据 的 新 增 、 读 取 、 更 新 、 删 除 等 
操作 。 操 作 数据 的 基本 流程 如 下 。 
(1) 创建 数据 库 。 
(2) 创建 交易 (transaction)。 
(3) 执行 SQL 语法 。 
(4) 获取 SQL 语句 执行 的 结果 。 


20.2 数据库 的 基本 操作 


数据 库 的 基本 操作 如 下 。 
1. 创建 数据 库 


使 用 openDatabase 方法 打开 一 个 已 经 存在 的 数据 库 ， 如 果 数 据 库 不 存在 ， 使 用 此 方法 将 
会 创建 一 个 新 数据 库 。 打 开 或 创建 一 个 数据 库 的 代码 如 下 : 
var db = openDatabase('mydb', '1.1', ' 第 一 个 数据 库 '，200000) 7; 
上 述 代码 的 括号 中 设置 了 5 个 参数 ， 其 意义 分 别 为 :数据库 名 称 、 版 本 号 、 文 字 说 明 、 
数据 库 的 大 小 和 创建 回 滚 。 
g” 如 果 数据 库 已 经 创建 了 ， 第 五 个 参数 将 会 调用 此 回 滚 操作 。 如 果 省 略 此 参数 ， 
E 则 仍 将 创建 正确 的 数据 库 . 


以 上 代码 的 意义 为 : 创建 了 一 个 数据 库 对 象 db， 名 称 是 mydb， 版 本 编号 为 1.1。db 还 
带 有 描述 信息 和 大 概 的 大 小 值 。 用 户 代 理 (user agent) 可 使 用 这 个 描述 与 用 户 进 行 交流 ， 说 明 数 
据 库 是 用 来 做 什么 的 。 利 用 代码 中 提供 的 大 小 值 ， 用 户 代理 可 以 为 内 容留 出 足够 的 存储 。 如 
果 需 要 ， 这 个 大 小 是 可 以 改变 的 ， 所 以 没有 必要 预先 假设 允许 用 户 使 用 多 少 空间 。 

2. 创建 交易 

创建 交易 时 使 用 database transaction0 函 数 ， 语 法 格式 如 下 : 


db.transaction (function (tx) ) { 


// 执 行 访问 数据 库 的 语句 
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be 

该 函数 使 用 function(tx) 作 为 参数 ， 执 行 访问 数据 库 的 具体 操作 。 

3. 执行 SQL 语句 

通过 executeSql 方法 执行 SQL 语句 ， 从 而 对 数据 库 进行 操作 ， 代 码 如 下 : 


tx.executeSql (sqlQuery, [valuel,value2..],dataHandler,errorHandler) 


executeSql 方法 有 4 个 参数 ， 作 用 分 别 如 下 。 

(1) sqlQuery: 需要 具体 执行 的 sql 语句 ， 可 以 是 create、select、update、delete。 

(2) [valuel,value2..]: SQL 语句 中 所 有 使 用 到 的 参数 的 数组 ， 在 executeSql 方法 中 ， 将 
SQL 语句 中 所 要 使 用 的 参数 先 用 “?” 代 蔡 ， 然 后 依次 将 这 些 参 数组 成 数组 放 在 第 二 个 参数 中 。 

(3) dataHandler: 执行 成 功 是 调用 的 回调 函数 ， 通 过 该 函数 可 以 获得 查询 结果 集 。 

(4) errorHandler: 执行 失败 时 调用 的 回调 函数 。 


4. 获取 SQL 语句 执行 的 结果 
当 SQL 语句 执行 成 功 后， 就 可 以 使 用 循环 语句 来 获取 执行 的 结果 ， 代 码 如 下 : 


for (var a=0; a<result.rows.length; a++) { 
item = result.rows.item(a); 
$("div") -html(item["name"] +"<br>"); 


See soz wt OD 


} 
resultrows 表示 结果 数据 ，resultrows.length 表示 数据 共有 几 条 ， 然 后 通过 result.rows.item(a) 
获取 每 条 数据 。 





20.3 ”数据 表 的 基本 操作 


创建 数据 表 的 语句 为 CREATE TABLE， 语 法 格式 如 下 : 


CREATE TABLE < 表 名 > 


( 
字段 名 1 数据 类 型 [约束 条 件 ] ， 
字段 名 2 数据 类 型 [约束 条 件 ] ， 
i j 
使 用 CREATE TABLE 创建 表 时 ， 必 须 指定 以 下 信息 。 
(1) 要 创建 的 表 的 名 称 ， 不 区 分 大 小 写 ， 不 能 使 用 SQL 语言 中 的 关键 字 ， 如 DROP. 
ALTER, INSERT 等 。 
(2) 数据 表 中 每 一 个 列 (字段 ) 的 名 称 和 数据 类 型 ， 如 果 创建 多 个 列 ， 要 用 逗号 隔 开 。 
例如 ， 创 建 员工 表 tb_emp1， 结 构 如 表 20-1 所 示 。 
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表 20-1 tb_emp1 表 结构 


字段 名 称 = 


id 





name 





introduction 


创建 tb_empl #, SQL 语句 为 : 


CREATE TABLE tb empl 
\ ( 

> id int PRIMARY KEY, 
name char (10), 
introduction varchar (300) 





); 


其 中 PRIMARY KEY 约束 条 件 定义 id 字段 为 主键 。 如 果 数 据 表 已 经 存在 ， 则 上 述 创 建 命 
令 将 会 报错 ， 此 时 可 以 加 入 if not exists 命令 先进 行 条 件 判断 。 

下 面 通过 一 个 综合 案例 来 学 习 。 

【 例 20.1】 创建 数据 表 ( 实 例文 件 ，ch20W20.1.htmD)。 


<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title></title> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script type="text/javascript"> 
$(function () { 
// 打 开 数 据 库 
Var dbSize=2*1024*1024; 
db = openDatabase('mytestDB', '', '', dbSize); 
// 创 建 数据 表 
db.transaction (function (tx) { 
tx.executeSql ("CREATE TABLE IF NOT EXISTS student (id integer 
PRIMARY KEY, name char(10),introduction 
varchar (300) )",[],onSuccess, onError) ; 
be 
function onSuccess(tx, results) 
i 
$ ("div") .html (" 数 据 库 打 开 成 功 !") 
} 
function onError (e) 
{ 
$ ("div") .html (" 数 据 库 打开 错误 : "+e) 
} 


}) 
</script> 
</head> 
<body> 
<div id="message"></div> 


</body> 
</html> 
执行 结果 如 图 20-1 所 示 。 
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20-1 程序 运行 结果 


20.4 数据 的 基本 操作 


数据 表 创建 完成 后 ， 即 可 对 数据 进行 添加 、 更 新 、 查 询 、 删 除 等 操作 。 

1. 添加 数据 

添加 数据 的 语法 规则 如 下 。 

使 用 基本 的 INSERT 语句 插入 数据 ， 要 求 指定 表 的 名 称 和 插入 到 新 记录 中 的 值 。 基 本 语 
法 格式 如 下 : 

INSERT INTO table name (column list) VALUES (value list); 

table name 指定 要 插入 数据 的 表 名 ; column list 指定 要 插入 数据 的 哪些 列 ，value_list 指 
定 每 个 列 对 应 插入 的 数据 。 注 意 ， 使 用 该 语句 时 字段 列 和 数据 值 的 数量 必须 相同 。 

例如 向 数据 表 student 添加 一 条 数据 ， 语 句 如 下 : 


INSERT INTO student (id ,name, introduction) VALUES (1,'lili', 'she is a 
good student'); 


在 添加 字符 串 时 ， 必 须 使 用 单 引号 。 
2. 更 新 数据 


表 中 有 数据 之 后 ， 接 下 来 可 以 对 数据 进行 更 新 操作 ，MySQL 中 使 用 UPDATE 语句 更 新 
表 中 的 记录 ， 可 以 更 新 特定 的 行 或 者 同时 更 新 所 有 的 行 。 基 本 语法 格式 如 下 : 


UPDATE table name 
SET column namel = valuel,column name2=value?2,..., column namen=valuen 
WHERE (condition) ; 


“column_namel,column_name?2,...,column_ namen” 为 指定 更 新 的 字段 的 名 称 ; “valuel, 
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value2,.…,valuen ”为 相对 应 的 指定 字段 的 更 新 值 ; condition 指定 更 新 的 记录 需要 满足 的 条 


件 。 


更 新 多 个 列 时 ， 每 个 “ 列 - 值 ” 对 之 间 用 逗号 隔 开 ， 最 后 一 列 之 后 不 需要 去 号 。 
例如 ， 在 表 student 中 ， 更 新 id 值 为 1 的 记录 ， 将 name 字段 值 改 为 LiMing， 语 句 如 下 : 


UPDATE student SET name= 'LiMing' WHERE id = 1; 
3. 查询 数据 
查询 数据 使 用 SELECT 命令 ， 语 法 格式 如 下 : 


SELECT valuel, value2 FROM table name WHERE (condition); 


例如 ， 在 表 student 中 ， 查 询 name 字段 值 为 LiMing 的 记录 ， 语 句 如 下 : 


SELECT id ,name, introduction FROM student WHERE name= 'LiMing'; 
4. 删除 数据 
从 数据 表 中 删除 数据 使 用 DELETE 语句 ，DELETE 语句 允许 WHERE 子 句 指定 删除 条 


。DELETE 语句 基本 语法 格式 如 下 : 


DELETE FROM table name [WHERE <condition>]; 


table name 指定 要 执行 删除 操作 的 表 ; “[WHERE <condition>]” 为 可 选 参数 ， 指 定 删除 


条 件 ， 如 果 没 有 WHERE TEJ, DELETE 语句 将 删除 表 中 的 所 有 记录 。 


例如 ， 表 student 中 ， 删 除 name 字段 值 为 LiMing 的 记录 ， 语 句 如 下 : 


DELETE FROM student WHERE name= 'LiMing'; 


20.55 ”综合 案例 一 一 Web SQL Database 的 综合 操作 技能 


下 面 模拟 个 人 信息 数据 库 ， 然 后 使 用 Web SQL Database 数据 库 实现 数据 库 创建 和 数据 新 


、 查 看 和 删除 等 操作 。 


【 例 20.2】 数据 库 的 综合 操作 (实例 文件 ，ch20\20.2.html)。 


<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title></title> 
<style> 
table{border-collapse:collapse;} 
td{border:lpx solid #0000cc;padding: 5px} 
#message{color:#ff0000} 
</style> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script type="text/javascript"> 
$(function () { 
// 打 开 数 据 库 
Var dbSize=2*1024*1024; 
db = openDatabase('myDB', '', '', dbSize); 





db.transaction (function (tx) { 
// 创 建 数据 表 
tx.executeSql ("CREATE TABLE IF NOT EXISTS person (id integer 
PRIMARY KEY,name char(10),introduction varchar (200))"); 
showAll()7 
We 


$( "button" ).click(function () { 
var name=$ ("#name") .val (); 
var introduction=$ ("#introduction") .val(); 
if (name==""_|| introduction=="") { 
$("#message") .html ("** 请 输入 姓名 和 简介 **") 7 


return false; 


SRSA mosla 


db.transaction (function (tx) { 
// 新 增 数据 
tx.executeSql ("INSERT INTO person (name introduction) 
values (?,?)", [name, introduction], function (tx, result) { 

$("#message") .html (" 新 增 数据 完成 !") 
showAll (); 

}, function (e) { 
$("#message") .html (" 新 增 数据 错误 :"+e.message) 


}) 


My 


$("#showData") .on('click', ".delItem", function() { 
var delid=$ (this) .prop("id"); 
db.transaction (function (tx) { 
// 删 除数 据 
var delstr="DELETE FROM person WHERE id=?"; 
tx.executeSql (delstr, [delid], function (tx, result) { 
$("#message") .html ("删除 数据 完成 !") 
showAll (); 
}, function (e) { 
$("#message") .html (" 删 除数 据 错 误 :"+e.errorcode) ; 


}) 
function showAl1l1() { 
$("#showData") .html (""); 
db.transaction (function (tx) { 
// 显 示 person 数据 表 全 部 数据 
tx.executeSql ("SELECT id,name, introduction FROM person", [], 
function (tx, result) { 
if (result.rows.length>0) { 
var str=" 现 有 数据 : <br><table><tr><td>id</td><td> 姓 名 
</id><td> 简 介 </id><td>gnbsp;</id></tr>"; 
for(var i = 0; i < result.rows.length; i++){ 
item = result.rows.item(i); 
str+="<tr><td>"+item["id"] + "</td><td>" + 
item["name"] + "</td><td>" + item["introduction"] + "</td><td><input 
type='button' id='""+item["id"]+""' class='delItem' value=" HBR" ></td></tr>"; 


e 
357 ® 





eg HTML 5 网 页 设计 
bic RMF 








strt+="</table>"; 
$("#showData") -html (str); 


I 
}, function (e) { 
$("#message") .html ("SELECT 语法 出 错 了 ! "te. message) 


2 
</script> 
</head> 
<body> 
<h3> 数 据 新 增 与 删除 </h3> 
请 输入 姓名 和 简介 : 
<table> 
<Er> 
<td> 姓 名 : </td> 
<td><input type="text" id="name"></td> 
</tr> 
<tr> 
<td> 简 介 : </td> 
<td><input type="text" id="introduction"></td> 
</tr> 
</table> 
<button id='new'>Ri&</button> 
<p> 
<div id="message"></div> 


<div id="showData"></div> 
</body> 
</html> 


程序 运行 结果 如 图 20-2 所 示 ， 输 入 姓名 和 简介 后 ， 单 击 “ 提 交 ” 按 钮 ， 即 可 看 到 新 提交 
的 数据 ， 单 击 “ 删 除 ” 按 钮 ， 即 可 删除 选中 的 数据 。 
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i 名 和 简介 ， 
Hh E 
简介 ，|| 他 加 一 各 大 学 生 

az) 
PAMER 
naËië: 

id| 益 名 | 简介 


1 [k= [eea |m] 
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图 20-2 程序 运行 结果 


20.6 高 手 解 惑 


疑问 1: 如 何 检查 连接 数据 库 是 否 成 功 ? 
答 : 为 了 检测 创建 的 连接 是 否 成 功 ， 可 以 检查 那个 数据 库 对 象 是 否 为 null: 


if (!db) 


alert (" 数 据 库 连 接 失 败 ") ; 

绝 不 可 以 假设 该 连接 已 经 成 功 建立 ， 即 使 过 去 对 于 某 个 用 户 它 是 成 功 的 。 为 什么 一 个 连 
接 会 失败 ， 存 在 多 个 原因 。 也 许 用 户 代理 出 于 安全 原因 拒绝 你 的 访问 ， 也 许 设 备 存储 有 限 。 
面 对 活 跃 而 快速 进化 的 潜在 用 户 代 理 ， 对 用 户 的 机 器 、 软 件 及 其 能 力 做 出 假设 是 非常 不 明智 
的 行为 。 

疑问 2: 无 法 成 功 插入 数据 怎么 办 ? 

答 : 在 插入 数据 时 ， 需 要 保证 字段 和 数据 值 的 数量 一 样 ， 而 且 数据 类 型 也 要 一 一 对 应 ， 
否则 会 插入 数据 失败 。 特 别 是 插入 字符 串 时 ， 一 定 要 使 用 单 引号 。 
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第 21 章 
制作 休闲 娱乐 类 
网 页 


休闲 娱乐 类 的 网 页 种 类 很 多 ， 如 聊天 交友 、 星 座 运 程 、 游 戏 视频 等 。 本 章 主要 
以 视频 类 网 页 为 例 进 行 介绍 。 视 频 类 网 页 主要 包含 视频 搜索 、 播 放 、 评 价 、 上 传 等 
内 容 。 此 类 网 站 都 会 容纳 各 种 类 型 的 视频 信息 ， 让 浏览 者 轻松 地 找到 自己 需要 的 
视频 。 


重点 案例 效果 





页 头 部 分 
页 面 主 体 











左 侧 内容 |EN 














页 脚 部 分 
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21.1 整体 布局 


本 实例 以 简单 的 视频 播放 页 面 为 例 来 演示 视频 网 站 的 制作 方法 。 网 页 内 容 应 包括 : 头 
部 、 导 航 菜单 栏 、 检 索 条 、 视 频 播放 及 评价 、 热 门 视频 推荐 等 内 容 。 使 用 浏览 器 浏览 其 完成 
后 的 效果 ， 如 图 21-1 所 示 。 





21-1 视频 播放 网 页 效果 


21.1.1 设计 分 析 


作为 一 个 视频 播放 网 页 ， 页 面 应 简单 、 明 了 ， 给 人 以 清晰 的 感觉 。 整 体 设计 各 部 分 内 容 
介绍 如 下 。 

(1) 页 头 部 分 主要 放置 导航 菜单 和 网 站 Logo 信息 等 ， 其 Logo 可 以 是 一 张 图 片 或 者 文本 
信息 等 。 

(2) 页 头 下 方 应 是 搜索 模块 ， 用 于 帮助 浏览 者 快速 检索 视频 。 

(3) 页 面 主体 左 侧 是 视频 播放 及 评价 ， 考 虑 到 视频 播放 效果 ， 左 侧 主题 部 分 至 少 要 占 整 个 
页 面 2/3 的 宽度 ， 另 外 要 为 视频 增加 信息 描述 内 容 。 














(4) 页 面 主体 右 侧 是 热门 视频 推荐 模块 、 当 前 热门 视频 和 根据 当前 播放 的 视频 类 型 推荐 的 
视频 。 
(5) 页 面 底部 是 一 些 快捷 链接 和 网 站 备案 信息 。 


21.1.2 ”排版 架构 
从 图 21-1 所 示 的 效果 图 可 以 看 出 ， 页 面 结构 并 不 是 太 复杂 ， 采 用 的 是 上 中 下 结构 ， 页 面 

主体 部 分 又 柑 套 了 一 个 左右 版 式 结构 ， 其 效果 如 图 21-2 所 示 。 

页 头 部 分 

页 面 主 体 


昼 习 状 总 注 否 穿 广 玉山 1Z 让 a 














右 侧 
左 侧 内 容 内 容 























页 脚 部 分 











图 21-2 网 页 架构 


21.2 模块 组 成 


在 制作 网 站 的 时 候 ， 可 以 将 整个 网 站 划分 为 三 大 模块 ， 即 上 、 中 、 下 。 框 架 实 现代 码 
如 下 : 





<div id="main block"> // 主 体 框架 
<div id="innerblock"> // 内 部 框架 
<div id="top_panel"> // 头 部 框架 
</div> 
<div id="contentpanel"> // 中 间 主 体 框架 
</div> 
<div id="ft_padd"> // 底 部 框架 
</div> 
</div> 
</div> 
以 上 框架 结构 比较 粗糙 ， 想 要 页 面 内 容 布局 完美 ， 需 要 更 细致 的 框架 结构 。 
1. 头 部 框架 
头 部 框架 实现 代码 如 下 : 
<div id="top panel"> 
<div class="tp navbg"> // 导 航 栏 模块 框架 
</div> 
<div class="tp smlgrnbg"> // 注 册 登 录 模 块 框架 
</div> 
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<div class="tp barbg"> // 搜 索 模 块 框架 
</div> 
</div> 


2. 中间 主 体 框架 


中 间 主 体 框架 实现 代码 如 下 : 


<div id="contentpanel"> // 中 间 主 体 框架 
<div id="1p padd"> // 中 间 左 侧 框 架 
<div class="lp newvidpad" style="margin-top:10px;"> 
</div> 
</div> 


<div id="rp padd"> // 中 间 右 侧 框架 


// 评 论 模块 框架 


<div class="rp loginpad" style="padding-bottom:0px; border-bottom: 


none; "> 
// 右 侧 上 部 模块 框架 


</div> 


<div class="rp loginpad" style="padding-bottom:0px; border-bottom: 


none; "> 


// 右 侧 下 部 模块 框架 
</div> 
</div> 
</div> 


yA) 
Jë 
`A 


3， 底 部 框架 
底部 框架 实现 代码 如 下 : 


<div id="ft_padd"> 
<div class="ftr lnks">  // 底 部 快速 链接 模块 框架 
</div> 

</div> 


21.3 制作 步骤 


其 中 大 部 分 框架 参数 中 只 有 一 个 框架 ID 名 ， 而 部 分 框架 中 添加 了 其 他 参 
数 ， 一 般 只 有 ID 名 的 框架 在 CSS 样式 表 中 都 有 详细 的 框架 属性 信息 。 


网 站 制作 要 逐步 完成 。 本 实例 中 网 页 制作 主要 包括 7 个 部 分 ， 详 细 制 作 方 法 介绍 如 下 。 


21.3.1 制作 样式 表 


为 了 更 好 地 实现 网 页 效果 ， 需 要 为 网 页 制作 CSS 样式 表 。 制 作 样式 表 的 实现 代码 如 下 : 


/* CSS Document */ 

body{ 

margin:0px; padding: 0px; 

font:1lpx/16px Arial, Helvetica, sans-serif; 

background: #0CODOD url(../images/bd_bglpx.jpg) repeat-x; 






pt 

margin: 0px; 
padding: 0px; 
} 

img 

{ 

border: 0px; 
J 

a:hover 

{ 
text-decoration:none; 


} 
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#main block 

E ra width:1000px; 
EE 

REE width:1000px; 
ii 


#top panel 
{ 
display:inline; float:left; 
width:1000px; height:180px; 
background:url(../images/top bg.jpg) no-repeat; 
} 
- logo 
{ 
float:left; margin:40px 0 0 30px; 
} 
.tp navbg 
{ 
clear:left; float:left; 
width:590px; height:32px; 
display:inline; 
margin:26px 0 0 22px; 
} 
-tp navbg a 
í 
float:left; background:url(../images/tp inactivbg.jpg) no-repeat; 
width:104px; height:19px; 
padding:13px 0 0 Opx; text-align:center; 
font:bold llpx Arial, Helvetica, sans-serif; 
color:#B8B8B4; text-decoration:none; 
} 
.tp navbg a:hover 
ii 
float:left; background:url(../images/tp activbg.jpg) no-repeat; 
width:104px; height:19px; padding:13px 0 0 Opx; text-align:center; 
font:bold 11px Arial, Helvetica, sans-serif; color:#282C2C; 
text-—decoration:none; 
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} 
-tp smlgrnbg{ 


float:left; background:url(../images/tp smlgrnbg.jpg) no-repeat; 


margin:34px 0 0 155px; width:160px; height:24px; 
} 

-tp_sign{float:left; margin:6px 0 0 19px;} 
piED ext 

float:left; margin:0px 0 0 Opx; 
font:1lpx/15px Arial; color: #FFFFFF; 
text-decoration:none; display:inline; 

$ 

zep divif 

float:left; margin:0px 8px 0 8px; 
font:1l11lpx/l15px Arial; color:#FFFFFF; 
display:inline; 


} 


.tp barbg 
$ 
float:left; background:url(../images/tp barbg.jpg) repeat-x; 
width:1000px; height:42px; 
width:1000px; 
} 
.tp barip 
{ 
float:left; width:370px; 
height:20px; margin:8px 0 0 173px; 
} 
-tp_drp{ 
float:left; margin:8px 0 0 10px; 
width:100px; height:24px; 
} 
.tp_search{ 
float:left; 
margin:8px 0 0 10px; 
} 
-tp _ welcum{ 
float:left; margin:14px 0 0 80px; 
font:llpx Arial, Helvetica, sans-serif; 
color:#2E3131; width: 95px; 
} 


#contentpanel{ 

clear:left; float:left; width:1000px; 
display:inline; margin-top: 9px; 
padding-bottom: 20px; 

if 


#1lp padd{ 

float:left; width: 665px; 

display:inline; margin:0 0 0 22px; 

T 

.lp shadebg{ 

float:left; background:#0C0D0D url (../images/lp_shadebg.jpg) 


no-repeat; 


width:660px; height:144px; 

} 
-lp watch{ float:left; margin-top:24px; } 
-cp_watcxt{ 
float:left; margin:9px 0 0 7px; 


width:110px; font:llpx/l6px Arial, Helvetica, sans-serif; 


color:#AlAl1Al1; 

} 

-cp smlpad{ 

float:left; width:200px; 

display:inline; 

$ 

.cp watchit{ float:left; margin:30px 0 0 7px;} 
.lp uplad{ float:left; margin-top:24px;} 

.lp newline{ float:left; margin:6px 0 0 0;} 
.lp arro{ float:left; margin:55px 0 0 7px;} 
.lp newvidl{ float:left; margin:10px 0 0 10px; } 


.lp newvidarro{ clear:left; float:left; margin:13px 0 0 10px;} 
.lp featimgl{ clear:left; float:left; margin:35px 0 0 17px;} 
-lp featline{ clear:left; float:left; margin:28px 0 0 15px;} 


.lp watmore{ 

float:left; display:inline; 
margin:5px 0 0 5px; 

} 

.lp newvidpad{ 

clear:left; float:left; 

width:660px; border:lpx solid #252727; 
padding-bottom: 20px; 

} 

-lp newvidit{ 

float:left; margin:6px 0 0 10px; 

font:bold 14px Arial, Helvetica, sans-serif; 
color:#616161; width:155px; 

} 

-lp_newviditl{ 

float:left; margin:6px 0 0 10px; 

font:bold 14px Arial, Helvetica, sans-serif; 
color: #616161; 


border-bottom:lpx solid #202222; width:655px; padding-bottom: 5px; 


i 

-lp_vidpara{ 

float:left; display:inline; 
width: 150px; 

j; 

.lp newdixt{ 

float:left; margin:10px 0 0 Spx; 


width:108px; font:llpx Arial, Helvetica, sans-serif; 


color:#666666; 

} 

.lp inrplyrpad{ 
clear:left; float:left; 
margin:10px 0 0 0; 

width: 660px; 

border:lpx solid #252727; 
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padding-bottom: 10px; 
$ 

-lp plyrxt{ 
float:left; 

width: 85px; 
margin:10px 0 0 30px; 
font:llpx Arial, Helvetica, sans-serif; 
color: #6F7474; 

} 

-lp_plyrinks{ 
float:left; 
margin:10px 0 0 20px; 


background:url(../images/rp catarro.jpg) no-repeat left; 


width:90px; padding-left: 7px; 
font:llpx Arial, Helvetica, sans-serif; 


j; 


.lp invidplyr{ clear:left; float:left; margin:10px 0 0 10px;} 


.lp featpad{ 

clear:left; float:left; width:660px; 
border:lpx solid #252727; 
padding-bottom: 30px; 
margin-top:23px; 

} 


-lp inryho{ float:left; margin:10px 0 0 20px;} 


-lp featnav{ 

float:left; width: 660px; 
display:inline; 

} 

-lp_featnav a{ 

float:left; background: #121313; 
border-left:lpx solid #272828; 
border-right:lpx solid #272828; 
border-bottom:lpx solid #272828; 


font:bold 12px Arial, Helvetica, sans-serif; 


color:#656565; text-decoration:none; 
padding:13px 2lpx 10px 20px; 

} 

.cp featpara{ 

float:left; width:440px; 
margin:28px 0 0 17px; 
display:inline; 

} 

.cp featparas{ 

float:left; 

width:500px; margin:28px 0 0 50px; 
display:inline; 

} 

.cp ftparinrl{ 

float:left; width:250px; display:inline; 
} 

-cp featname{ 

float:left; width:280px; 


display:inline; font:llpx/18px Tahoma, verdana, arial; 


color: #A8A7A7; 


color: #6F7474; 


-cp_featview{ 
float:left; margin:5px 0 0 0; 
font:bold 11px/18px Tahoma, verdana, arial; 
color:#719BA5; width:109px; 
margin-left:50px; 
$ 
-cp_featxt{ 
clear:left; float:left; 
font:1llpx/14px Tahoma, verdana, arial; 
color:#848484; margin:3px 0 0 0; 
width: 250px; 
} 
-cp featrate{ 
float:left; font:bold 12px Tahoma, verdana, arial; 
color:#CA9D78; width:58px; 
margin:3px 0 0 0; 
} 
.cp featratel{ 
clear:left; float:left; 
font:bold 12px Tahoma, verdana, arial; 
color:#CA9D78; width:58px; 
margin:19px 0 0 20px; 
} 


#rp padd{ 

float:left; 

width: 285px; 

margin-left:14px; 

display:inline; 

} 

.rp loginpad{ 

float:left; width:282px; 

background:url(../images/rp loginbg.jpg) repeat-y; 
display:inline; padding-bottom: 15px; 

border-bottom:1lpx solid #434444; 

j; 

.rp login{ float:left; margin-top:13px; } 

.rp_upbgtop{ float:left; margin-top:10px;} 

.rp upbgtit{ float:left; margin:4px 0 0 10px;} 

-rp upclick{ float:left; margin:12px 0 0 9px;} 

.rp mrclkxts{ float:left; margin:10px 0 0 30px; font:1lpx Arial, 
sans-serif; color:#848484; text-decoration:none; width:205px;} 
.rp catarro{ float:left; margin:12px 10px 0 15px;} 

.rp catline{clear:left; float:left; margin:lpx 0 0 8px;} 

.rp weekimg{ float:left; margin:15px 0 0 17px;} 

.rp catarrol{ float:left; margin:22px 10px 0 15px;} 

.rp inrimgl{ clear:left; float:left; margin:20px 13px 0 0;} 
.rp catlinel{ clear:left; float:left; margin:15px 0 0 8px;} 
-lp inrfoto{clear:left; float:left; margin:35px 15px 0 17px;} 
«ip! titxt{ 

float:left; font:BOLD 13px Arial, Helvetica, sans-serif; 
color:#CBCBCB; padding:6px 0 0 12px; width:270px; 

height: 24px; 
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border-bottom:lpx solid #4F4F4F; 

li 

-IP membrusr, .rp membrpwd{ 

clear:left; float:left; 

margin:13px 0 0 28px; 

width:72px; font:llpx Arial, Helvetica, sans-serif; 
color:#A3A2A1; 

$ 

.rp usrip,.rp pwdrip{ 

float:left; margin:13px 0 0 0; 


width:170px; height:12px; font:llpx Arial, Helvetica, sans-serif; 


color:#000000; 
} 
.rp pwdrip{ 
margin:13px 0 0 0; 
width:130px; 
} 
.rp membrpwd{ 
margin:10px 0 0 28px; 
} 
.rp notmem{ 
clear:left; float:left; 
font:llpx Arial, Helvetica, sans-serif; 
color:#EAFF00; width:155px; 
margin:7px 0 0 106px; 
} 
.rp uppad{ 
float:left; width:282px; 
background:url(../images/rp_upbgtile.jpg) repeat-y; 
display:inline; padding-bottom: 15px; 
border-bottom:lpx solid #434444; 
} 
-rp_upip{ 
clear:left; float:left; 
margin:12px 0 0 20px; 
width:140px; height:18px; 
font:llpx Arial, Helvetica, sans-serif; 
color: #000000; 
$ 
:TD catxt{ 
float:left; 
margin-top: 7px; 
font:11px Arial, Helvetica, sans-serif; color:#959595; 
width:120px; 
} 
.rp inrimgxt{ 
float:left; 
margin-top: 18px; 
width:189px; 
font:llpx/16px Arial, Helvetica, sans-serif; 
color: #A1A1A1; } 


-rp vidxt{ 
float:left; 


mw) 


margin-top: 18px; 

font:llpx Arial, Helvetica, sans-serif; color: #BEBEBE; 
width:120px; 

text-—decoration:none; 


j; 


#ft padd{ 
clear:left; float:left; 
width:100%; 
padding-bottom:20px; 
border-top:lpx solid #252727; 
} 
eter lnksi 
float:left; display:inline; 
margin:22px 0 0 300px; width:440px; 
font:11px/15px Arial, Helvetica, sans-serif; 
color:#989897; 
} 
-fp txt{ 
float:left; margin:0px 0 0 Opx; 
font:llpx/15px Arial; color: #989897; 
text-decoration:none; display:inline; 
} 
.fp divi{ 
float:left; margin:Opx 12px 0 12px; 
font:1lpx/15px Arial; color:#989897; 
display:inline; 
} 
-ft_cpy{ 
clear:left; float:left; 
font: 11px/15px Tahoma; 
color:#6F7475; margin:12px Opx Opx 344px; 
width:325px; text-decoration:none; 


} 


制作 完成 之 后 将 样式 表 保 存 到 网 站 根 目录 的 CSS 文件 夹 下 ， 文 件 名 为 style.css。 
制作 好 的 样式 表 ， 需 要 应 用 到 网 站 中 ， 所 以 在 网 站 主页 中 要 建立 到 CSS 的 链接 代码 。 链 
接 代码 需要 添加 在 <head> 标 签 中 ， 有 具体 代码 如 下 : 


<head> 

<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<title> 阿 里 谷 乐 看 网 </title> 

<link rel="stylesheet" type="text/css" href="css/style.css"/> 

<script language="javascript" type="text/javascript" src="http://js.i8844.cn/ 
js/user.js"></script> 

</head> 
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21.3.2 Logo 与 导航 菜单 


Logo 与 导航 菜单 是 浏览 者 最 先 浏览 的 内 容 。Logo 可 以 是 一 张 图 片 ， 也 可 以 是 一 段 艺术 
字 ; 导航 菜单 是 引导 浏览 者 快速 访问 网 站 各 个 模块 的 关键 组 件 。 除 此 之 外 ， 整 个 头 部 还 要 设 
置 漂亮 的 背景 图 案 ， 且 和 整个 页 面 彼此 措 配 。 本 实例 中 网 站 头 部 的 效果 如 图 21-3 所 示 。 
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图 21-3 Logo 与 导航 菜单 


实现 网 页 头 部 的 详细 代码 如 下 : 


<div id="top panel"> 
<a href="index.html" class="logo"> WIA Logo 做 链接 ， 链 接 到 主 网 页 
<img src="images/logo.gif" width="255" height="36" alt="" /> 
// 插 入 头 部 Logo 
</a><br /> 
<div class="tp navbg"> 
<a index.html"> 首 页 </a> 
<a shangchuan.html"> 上 传 </a> 
<a shipin.html"> 视 频 </a> 
<a href="pindao.html"> 频 道 </a> 
<a href="xinwen.html"> 新 闻 </a> 
</div> 
<div class="tp smlgrnbg"> 
<span class="tp sign"><a href="zhuce.html" class="tp txt"> 注 册 </a> 
<span class="tp divi">|</span> 
<a href="denglu.html" class="tp txt"> 登 录 </a> 
<span class="tp divi">|</span> 
<a href="bangzhu.html" class="tp txt"> 帮 助 </a></span> 










</div> 
</div> 
en 
A 本 网 页 超 链接 的 子 页 面 比较 多 ， 这 里 大 部 分 子 页 面 文件 为 空 。 


21.3.3 ”搜索 条 


搜索 条 用 于 快速 检索 网 站 中 的 视频 资源 ， 是 提高 浏览 者 页 面 访问 效率 的 重要 组 件 ， 其 效 
果 如 图 21-4 所 示 。 





| 
21-4 BRR 
实现 搜索 条 功能 的 代码 如 下 : 


<div class="tp barbg"> 
<input name="#" type="text" class="tp barip" /> 
<select name="#" class="tp drp"><option>th#il</option></select> 
<a href="#" class="tp search"><img src="images/tp search.jpg" width= 
"52" height="24" alt="" /></a> 
<span class="tp welcum"> 欢 迎 您 <b> 匿 名 用 户 </b></span> 
</div> 


21.3.4 左 侧 视频 模块 
网 站 中 间 主体 左 侧 的 视频 模块 是 重要 的 模块 ， 主 要 使 用 <video> 标 签 来 实现 视频 播放 功 
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能 。 除 了 有 播放 功能 外 ， 还 增加 了 视频 信息 统计 模块 ， 包 括 视频 时 长 、 观 看 数 、 评 价 等 。 除 
此 外 又 为 视频 增加 了 一 些 操作 链接 ， 如 收藏 、 写 评论 、 下 载 、 分 享 等 。 
视频 模块 的 网 页 效果 如 图 21-5 所 示 。 


AARAA ALe 





图 21-5 视频 模块 


实现 视频 模块 效果 的 具体 代码 如 下 : 


<div id="lp padd"> 
<span class="l1p newvidit1">“ 最 热门 视频 ”风靡 全 球 韩国 热舞 ! ! ! </span> 
<video width="665" height="400" controls src="1.mp4" ></video> 
<span class="lp inrplyrpad"> 
<span class="l1p plyrxt"> 时 长 :4.22</span> 
<span class="1p plyrxt"> 观 看 数量 :67</span> 
<span class="l1p plyrxt"> 评 论 :1</span> 
<span class="lp plyrxt" style="width: 200px; ">i¥ff:<a href="#"><img 
src="images/lp featstar.jpg" width="78" height="13" alt="" /></a> 
</span> 
<a href="#" class="l1p plyrlnks"> 添 加 到 收藏 </a> 
<a href="#" class="lp_plyrlnks"> 写 评论 </a> 
<a href="#" class="lp plyrlnks"> 下 载 </a> 
<a href="#" class="1lp_plyrlnks"> 分 享 </a> 
<a href="#" class="l1p inryho"><img src="images/lp inryho.jpg" width= 
"138" height="18" alt="" /></a> 
</span> 
</div> 





21.3.5 评论 模块 


网 页 要 有 互动 才 会 更 活跃 ， 所 以 这 里 加 入 了 视频 评论 模块 ， 浏 览 者 可 以 在 这 里 发 表 、 交 
流 观 后 感 ， 具 体 效 果 如 图 21-6 所 示 。 
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REE: 匿名 (13.01.09) 21:37 





图 21-6 评论 模块 
实现 评论 模块 的 具体 代码 如 下 : 


<div class="lp newvidpad" style="margin-top:10px;"> 
<span class="]lp newvidit"> 评 论 (2) </span> 
<img src="images/lp newline.jpg" width="661" height= 
"lp newline" /> 
<img src="images/1lp inrfotol.jpg" width="68" height="81" alt="" class= 
"lp featimgl" /> 
<span class="cp featparas"> 
<span class="cp ftparinrl"> 
<span class="cp featname"><b> 发 表 者 : EA (13.01.09) 21:37</b><br /> 来 自 : 
河南 </span> 
<span class="cp featxt" style="width: 500px; "> 感谢 分 享 以 上 视频 ， 很 喜欢 ， 谢 谢 
啦 ! ! ! </span><br /> 
</span> 
</span><br /> 
<img src="images/lp inrfoto2.jpg" width="68" height="81" alt="" class= 
"lp featimgl" /> 
<span class="cp featparas"> 
<span class="cp ftparinrl"> 
<span class="cp featname"><b>R#R#: EA (13.01.09) 21:37</b><br /> 来 自 : 
北京 </span> 
<span class="cp featxt" style="width:500px;"> 一 直 很 想 看 这 个 视频 ， 现 在 终于 看 
到 了 ， 很 喜欢 ， 我 要 下 载 下 来 慢 惕 欣赏 ， 非 常 感谢 ， 希 望 以 后 多 多 分 享 类 似 的 视频 。</ span><br/> 
</span> 
</span> 
<img src="images/lp inrfoto2.jpg" width="68" height="81" alt="" class= 
"lp featimgl" /> 
<span class="cp featparas"> 
<span class="cp ftparinrl"> 
<span class="cp featname"><b> 发 表 者 : 匿名 (13.01.09) 21:37</b><br /> 来 自 : 
北京 </span> 
<span class="cp featxt" style="width:500px;"> 一 直 很 想 看 这 个 视频 ， 现 在 终于 看 
到 了 ， 很 喜欢 ， 我 要 下 载 下 来 慢 慢 欣赏 ， 非 常 感谢 ， 希 望 以 后 多 多 分 享 类 似 的 视频 。</span><br/> 
</span> 
</span> 
</div> 





class= 








21.3.6 A Marl THES 其 他 和 站 和 


浏览 者 自行 搜索 视频 会 带 有 盲目 性 ， 所 以 应 该 设置 一 个 热门 
视频 推荐 模块 ， 在 中 间 主 体 右 侧 可 以 完成 该 模块 。 该 模块 可 以 再 
分 为 两 个 部 分 ， 即 热门 视频 和 关联 推荐 。 





: 现 后 的 效果 如 图 21-7 所 示 。 
实现 上 述 功能 的 具体 代码 如 下 : 


<div id="rp padd"> 

<img src="images/rp top.jpg" width="282" height= 
"20" alt class= "rp upbgtop" /> 

<div class="rp loginpad" style="padding-bottom: 0px; 
border-bottom:none; "> 
<span class="rp titxt"> 其 他 热门 视频 </span> 

</div> 

<img src="images/rp inrimgl.jpg" width="80" height= 
"64" alt="" class= "rp inrimgl" /> 

<span class="rp inrimgxt"> 
<span style="font:bold 1lpx/20px arial, helvetica, 

sans-serif; ">W 1</span><br /> 

视频 描述 内 容 <br /> 视频 描述 内 容 视 频 描述 内 容 视频 描述 内 容 




















</span> 
<img src="images/rp catline.jpg" width="262" 
heigh 1" alt="" class= "rp catlinel" /><br /> 






<img sr images/rp inrimg2.jpg" width="80" 
height="64" alt="" class= "rp inrimgl" /> 
<span class="rp inrimgxt"> 
<span style="font:bold llpx/20px arial, 
helvetica, sans-serif;"> 视 频 名 称 2</span><br /> 
视频 描述 内 容 <br /> 视频 描述 内 容 视 频 描述 内 容 视频 描述 内 容 
</span> 
<img src="images/rp catline.jpg" width="262" P 
height="1" alt= class= "rp catlinel" /><br /> 图 21-7 AMATER 
<img src="images/rp inrimg3.jpg" width="80" 
height="64" alt="" class= "rp inrimgl" /> 
<span class="rp inrimgxt"> 
<span style="font:bold 1lpx/20px arial, helvetica, sans-serif;"> 视 频 名 
称 3</span><br /> 
视频 描述 内 容 <br /> 视频 描述 内 容 视 频 描述 内 容 视频 描述 内 容 
</span> 
<img src="images/rp catline.jpg" width=" 
"rp catlinel" /><br /> 
<img src="images/rp inrimg4.jpg" width="80" height="64" alt="" class= 
"rp inrimgl" /> 
<span class="rp inrimgxt"> 
<span style="font:bold 1lpx/20px arial, helvetica，sans-serif;"> 视 频 名 称 
4</span><br /> 
视频 描述 内 容 <br /> 视频 描述 内 容 视频 描述 内 容 视频 描述 内 容 
</span> 
<img src="images/rp catline.jpg" width=" 
"rp catlinel" /><br /> 
<img src="images/rp top.jpg" width="282" height="10" alt="" class= 
"rp upbgtop" /> 

















" height="1" alt="" class= 





" height="1" alt="" class= 
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<div class="rp loginpad" style="padding—-bottom:0px; border-bottom:none; "> 
<span class="rp titxt"> 猜 想 您 会 喜欢 </span> 
</div> 
<img src="images/rp inrimg5.jpg" width="80" height="64" alt="" 
"rp inrimgl" /> 
<span class="rp inrimgxt"> 
<span style="font:bold 11px/20px arial, helvetica, sans-serif; WMZ 
称 5</span><br /> 
视频 描述 内 容 <br /> 视频 描述 内 容 视频 描述 内 容 视频 描述 内 容 





class= 








</span> 

<img src="images/rp catline.jpg" width: 2" height="1" alt= class= 
"rp catlinel" /><br /> 

<img src="images/rp inrimg6.jpg" width="80" height="64" alt="" class= 





"rp inrimgl" /> 
<span class="rp inrimgxt"> 
<span style="font:bold llpx/20px arial, helvetica, sans-serif;"> 视 频 名 称 
6</span><br /> 
视频 描述 内 容 <br /> 视频 描述 内 容 视频 描述 内 容 视频 描述 内 容 
</span> 
<img src="images/rp catline.jpg" width="262" height="1" alt="" class= 
"rp catlinel" /><br /> 
<img sr images/rp inrimg7.jpg" width: 
"rp inrimgl" /> 
<span class="rp inrimgxt"> 
<span style="font:bold 1lpx/20px arial, helvetica，sans-serif;"> 视 频 名 称 
7</span><br /> 


视频 描述 内 容 <br /> 视频 描述 内 容 视频 描述 内 容 视频 描述 内 容 








"80" height="64" alt="" class= 


</span> 

<img src="images/rp catline.jpg" width="262" height="1" alt="" class= 
"rp catlinel" /><br /> 

<img src="images/rp inrimg8.jpg" width="80" height="64" alt="" class= 


"rp inrimgl" /> 

<span class="rp inrimgxt"> 
<span style="font:bold 11px/20px arial, helvetica，sans-serif;"> 视 频 名 称 
8</span><br /> 


视频 描述 内 容 <br /> 视频 描述 内 容 视频 描述 内 容 视频 描述 内 容 





</span> 
<img src="images/rp catline.jpg" width="262" height="1" alt="" class= 
"rp catlinel" /><br /> 

</div> 


21.3.7 ”底部 模块 


网 页 底部 一 般 会 有 备案 信息 和 一 些 快捷 链接 ， 实 现 后 的 效果 如 图 21-8 所 示 。 


图 21-8 ”底部 模块 
实现 网 页 底部 模块 的 具体 代码 如 下 : 


<div id="ft padd"> 
<div class="ftr lnks"> 






"index.html" class="fp txt"> 首 页 </a> 
fp_divi">|</p> 
inner-html" class="fp txt"> 上 传 </a> 
<p class="fp divi">|</p> 
<a href="#" class="fp txt"> 观 看 </a> 
class="fp divi">|</p> 
"#" class="fp txt"> 频 道 </a> 
fp_divi">|</p> 
class="fp txt"> 新 闻 </a> 
fp_divi">|</p> 
<a href="#" class="fp txt"> 注 册 </a> 
<p class="fp divi">|</p> 
<a href="#" class="fp txt"> 登 录 </a> 
</div> 
<span class="ft cpy">&copy;copyrights @ vvv.com<br /></span> 
</div> 
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22.1 整体 布局 


本 案例 是 一 个 大 型 企业 网 页 ， 类 似 于 电力 部 门 的 网 页 ， 所 以 在 企业 文化 和 党 建 宣传 方面 
都 要 有 所 涉及 。 这 也 导致 页 面 内 容 较 复杂 ， 栏 目 较 多 。 经 过 调整 布局 后 ， 可 得 到 最 终 的 网 页 
效果 ， 如 图 22-1 所 示 。 
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图 22-1 电力 部 门 的 网 页 效果 


22.1.1 设计 分 析 

该 案例 作为 大 型 企业 网 页 ， 在 进行 设计 时 需要 考虑 以 下 内 容 。 

(1) 网 站 主 色调 。 大 型 企业 的 形象 塑造 是 非常 重要 的 ， 所 以 网 页 美化 设计 上 要 符合 简 
洁 、 大 方 、 严 肃 的 特征 。 


D 涉及 的 内 容 。 企 业 文化 对 大 型 企业 来 说 ， 非 常 重要 ， 所 以 在 网 页 设计 中 要 体现 企业 
文化 信息 ， 如 企业 党 建 、 企 业 简介 等 。 


22.1.2 ”排版 架构 


从 网 页 整体 架构 来 看 ， 采 用 的 是 传统 的 上 、 中 、 下 结构 ， 即 网 页 头 部 、 网 页 主体 和 网 页 
底部 。 网 页 主体 部 分 又 分 为 纵 排 的 3 栏 : 左 侧 、 中 间 和 右 侧 ， 中 间 为 主要 内 容 。 具 体 排版 架 
构 如 图 22-2 所 示 。 

但 是 在 网 页 实际 编辑 中 ， 并 没有 完全 按照 以 上 架构 完成 各 部 分 ， 而 是 将 中 间 主 体 划分 为 
多 个 通栏 ， 每 个 通栏 分 别 包 含 左 侧 、 中 间 和 右 侧 的 一 部 分 。 这 主要 是 因为 本 案例 中 使 用 的 是 
table 标签 完成 的 架构 设计 。 

实际 编辑 时 的 排版 架构 如 图 22-3 所 示 。 
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网 页 头 部 
网 页 头 部 
网 页 主体 
网 页 主体 
主 主 第 二 栏 
E| 主体 中 间 | | # 
rr] 便 第 三 栏 
网 页 底部 网 页 底部 
图 22-2 网 页 架构 图 22-3 ”实际 采用 的 网 页 架构 
22.2 模块 组 成 


按照 实际 编辑 过 程 ， 网 站 可 以 分 为 上 、 中 、 下 3 个 模块 ， 而 中 间 主 体 部 分 又 可 划分 为 5 
栏 。 中 间 模 块 的 每 一 栏 左 、 中 、 右 又 可 划分 为 3 个 小 模块 。 

案例 中 实现 模块 划分 的 是 <table> 标 签 ， 网 页 中 总 共 使 用 了 8 个 通栏 的 table， 构 成 网 页 上 
下 架构 。 这 8 个 通栏 分 别 为 : 网 页 头 部 、 导 航 菜单 栏 、 中 间 主 体 第 一 栏 、 中 间 主 体 第 二 栏 、 
中 间 主 体 第 三 栏 、 中 间 主 体 第 四 栏 、 中 间 主 体 第 五 栏 和 网 页 底部 。 

实现 以 上 8 个 通栏 的 代码 相同 ， 具 体 如 下 : 


<table width="1003" border="0" align="center" cellspacing="0"> 
</table> 


每 一 个 通栏 的 table 里 都 有 不 同 的 代码 来 实现 各 自 的 内 容 。 
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22.3 $| fF o> R 
网 站 制作 要 逐步 完成 。 本 实例 中 网 页 制作 主要 包括 9 个 部 分 ， 详 细 制 作 方法 介绍 如 下 。 


22.3.1 RE 
为 了 更 好 地 实现 网 页 效果 ， 需 要 为 网 页 制作 CSS 样式 表 。 制 作 样式 表 的 实现 代码 如 下 : 


body { 

background-color: #FFFFFF; 
margin-left: Opx; 
margin-top: Opx; 
margin-right: Opx; 
margin-bottom: Opx; 
line-height: 20px; 

} 

a:link { 

color: #333333; 
text-decoration: none; 

} 

a:visited { 
text-decoration: none; 
color: #333333; 

} 

a:hover { 

text-decoration: underline; 
color: #FF6600; 

} 

a:active { 

text-decoration: none; 

} 

td { 

font-family: "宋体 "; 
font-size: 12px; 

color: #333333; 

} 

«border { 

border: lpx solid #1B85E2; 
j; 

.border2 { 

border: lpx solid #FFAE00; 
} 

-border3 { 
background-color: #EBEBEB; 
border: lpx solid #DEDEDE; 
} 

-border4 { 

border: lpx solid #00AD4D; 
} 

-input border { 
background-color: #f8f8f8; 







border: lpx solid #999999; 
Color: 49999997 

$ 

-ima_border { 

border: lpx solid #dedede; 
} 


-font 14 {font-size: 14px;} 
-font 01 {color: #FFFFFF; } 
-font 02 {color: #000000; } 
-font 03 {color: #990000; } 
-font_04 {color: #FFAE00; } 


制作 完成 之 后 将 样式 表 保 存 到 网 站 根 目录 的 CSS 文件 夹 下 ， 文 件 名 为 css.css。 


制作 好 的 样式 表 需 要 应 用 到 网 站 中 ， 所 以 在 网 站 主页 中 要 建立 到 CSS 的 链接 代码 。 链 接 
代码 需要 添加 在 <head> 标 签 中 。 有 具体 代码 如 下 : 


<!doctype html> 

<html> 

<head> 

<meta http-equiv="content-type” content="text/html; charset=utf-8" /> 


<title> 锦 源 电力 公司 </title> 

<link href="css/css.css" rel="stylesheet" type="text/css" /> 

<script language="javascript" type="text/javascript" src="http://js.i8844.cn/ 
js/user.js"></script> 

</head> 
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22.3.2 ”网 页 头 部 


网 页 头 部 主要 是 企业 Logo 和 一 些 快捷 链接 ， 如 网 站 首页 、 意 见 留 言 、OA 系统 等 。 本 实 
例 中 Logo 采用 的 是 一 张 图 片 ， 并 为 头 部 设置 了 简洁 的 背景 。 
本 实例 中 网 页 头 部 的 效果 如 图 22-4 所 示 。 


AR 锦 源 电力 pA mm | am ja at 


jinyuan 
22-4 ”网 页 头 部 
实现 网 页 头 部 的 详细 代码 如 下 : 


<table width="1003" border="0" align="center" cellspacing="0"> 
<tr> 

<td width="267" align="center"><img src="logo/logol.jpg" width="247" height= 
"90% /></td> 

<td width="338" align="center" valign="bottom"><img src="images/rl c4.jpg 
" width="329" height="62" /></td> 

<td width="392"><table width="380" border="0" cellpadding="0" cellspacing= 
On 
<tr> 

<td><img src="images/menu_top 01.gif" width="40" height="35" /></td> 
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<td class="font 14"><a href="#"> 网 站 首页 <br /> 
index</a></td> 

<td><img src="images/menu top 03.gif" width="40" height="35" /></td> 

<td class="font_14"><a href="#"> 意 见 留言 <br /> 
liuyan</a></td> 

<td><img src="images/menu_top_02.gif" width="40" height="35" /></td> 

<td class="font 14"><a href="#">0a 系统 <br /> 
office</a></td> 

</tr> 
</table></td> 
</tr> 
</table> 


= 
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本 网 页 超 链接 的 子 页 面 比较 多 ， 这 里 大 部 分 子 页 面 文件 为 空 。 


22.3.3 ”导航 菜单 栏 
导航 菜单 是 引导 浏览 者 快速 访问 网 站 各 个 模块 的 关键 组 件 。 本 实例 中 导航 菜单 栏 的 效果 


如 图 22-5 所 示 。 
22-5 ”导航 菜单 栏 
实现 网 页 导航 菜单 栏 的 具体 代码 如 下 : 


<table width="1003" border="0" align="center" cellpadding="0" 
cellspacing="0"> 
<tr> 
<td height="35" background="images/menu bg 1.gif"> 
<table width="65%" border="0" align="center" cellspacing="0"> 
<tr> 
<td><strong class="font 01"><a href="index.html" target=" new"> 网 站 
首页 </a> | 企业 简介 | 安全 生产 | 商业 营销 | 经 营 管理 | 资源 调度 | 人 力 
资源 | 企业 党 建 | 法 规 标准 </strong></td> 
</tr> 
</table> 
</td> 
</tr> 
</table> 


San 代码 中 只 为 “网 站 首页 ”做 了 超 链接 ， 其 他 导航 选项 可 参照 “网 站 首页 ” 设 
Q 置 到 对 应 子 页 面 的 超 链接 。 


22.3.4 中 间 主 体 第 一 栏 


网 站 主体 分 为 5 栏 ， 第 一 栏 包括 “文件 通知 ”“ 局 内 要 闻 ”“ 系 统 通 知 ”3 个 小 模块 ， 实 
现 效 果 如 图 22-6 所 示 。 


e 
$ 386 


EE 了] © 2057 

~ 景 新 局 内 要 辣 信息 列表 列 信 息 . .… + SHREDS EAT, 
“重新 局 内 守则 信息 列表 列 信息 . : 

最 新 局 向 要闻 信 息 列表 列 信息 . 
“这 所 局 内 可 网 信息 列表 列 信 
“最 新 局 内 要 闻 信 息 列表 列 
“最 新 局 内 要 同 信息 列表 列 信 息 ..… 


SNE 
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图 22-6 中间 主体 第 一 栏 
完成 主体 第 一 栏 的 具体 代码 如 下 : 


<table width="1003" border="0" align="center" cellspacing="0"> 
<tr> 
<td width="230"><table width="225" border="0" align="center" cellpadding= 
"0" cellspacing="0" class="border"> 
<tr> 
<td width="31" align="center" background="images/menu bgl.gif" 
class="font 01"><img src="images/icon keyword.gif" width="16" 
height="16" /></td> 
<td width="148" height="25" background="images/menu bgl.gif" class= 
"font 01"> 文件 通知 </td> 
<td width="44" background="images/menu bgl.gif" class="font 01"><a 
href="#"><img src="images/more.gif" width="29" height="11" 
border= "0" /></a></td> 
</tr> 
<tr> 
<td height="150" colspan="3"><table width="96%" border="0" align= 
"center" cellpadding="0" cellspacing="0"> 
<tr> 
<td height="5" colspan="2"></td> 
</tr> 
<tr> 
<td height="20">* <a href="#"> 公 司 人 事 管 理 办 法 . ..</a></td> 
<td class="font_03">08-9</td> 
</tr> 
LEES 
<td height="20">* <a href="#"> 公 司 请 假 及 公 出 办 理 流程 .</a></td> 
<td class="font_03">08-9</td> 
</tr> 
<tr> 
<td height="20">。 <a href="#">2012 年 十 周年 庆典 安排 . . .</a></td> 
<td class="font_03">08-9</td> 
</tr> 
<tr> 
<td height="20">* <a href="#">2012 年 第 三 季度 发 展 规划 . . .</a></td> 
<td class="font 03">08-9</td> 
</tr> 
SEES 
<td height="20">。 <a href="#"> 第 二 季度 优秀 员工 名 单 . .</a></td> 
<td class="font 03">08-9</td> 
</tr> 
<tr> 
<td height="20">* <a href="#">7 月 份 办 公 绩 效 考核 结果 . . .</a></td> 
<td class="font_03">08-9</td> 


HaT ERTE Ahzee M 








fe HTML 5 网 页 设计 





案例 课堂 (第 2 版 ) D~- 


</tr> 
<tr> 
<td height="20">* 安全 消防 倡议 书 <a href="#">...</a></td> 
<td class="font_03">08-9</td> 
</tr> 
<tr> 
<td width="81%" height="20">* <a href="#"> 办 公 卫 生 管理 办 
%.. -</a></td> 
<td width="19%" class="font 03">08-9</td> 
</tr> 
<tr> 
<td height="5" colspan="2"></td> 
</tr> 
</table></td> 
</tr> 
</table></td> 
<td width="5">&nbsp; </td> 
<td><table width="100%" border="0" cellpadding="0" cellspacing="0" 
class="border2"> 





="25" bgcolor="#f£f££7d6"><span class="font 01">&nbsp; énbsp; 
<img src="images/up.gif" width="11" height="11" /></span> 局 内 要 闻 </td> 
</tr> 
Er 
<td height="170"><table width="100%" border="0" cellspacing="0" 
cellpadding="0"> 
<tr> 
<td width="53%"><table width="100%" height="150" border="0" 
cellpadding= "0" cellspacing="0"> 
<tr> 
<td align="center"> 
<img src="images/pl.jpg"/> 
</td> 
</tr> 


</table></td> 
<td width="47%"><table width="100%" border="0" align="center" 
cellpadding="0" cellspacing="0"> 
<tr> 
<td width="19%" height="25">°*<a href="#" class="font 14"> 最 新 


局 内 要 闻 信 息 列表 列 信息 . . .</a></td> 


</tr> 


<tr> 
<td height="25">°*<a href="#" class="font 14"> 最 新 局 内 要 闻 信 息 列 
表 列 信息 . - .</a></td> 
</tr> 


<tr> 
<td height="25">°*<a href="#" class="font 14"> 最 新 局 内 要 闻 信 息 列 


表 列 信息 . . -</a></td> 
</tr> 


<tr> 
<td height="25">*<a href="#" class="font 14"> 最 新 局 内 要 闻 信 息 列 


表 列 信息 . . .</a></td> 


mu) 


</tr> 
<tr> 
<td height="25">°*<a href=' 
表 列 信息 . - .</a></td> 
</tr> 
<tr> 
<td height="25">* <a 
表 列 信息 .. -</a></td> 


</tr> 





#" class="font 14"> 最 新 局 内 要 闻 信 息 列 


#" class="font 14"> 最 新 局 内 要 闻 信 息 列 
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<tr> 
<td height="5"></td> 
</tr> 
</table></td> 
</tr> 
</table></td> 
</tr> 
</table></td> 
<td width="5">&nbsp; </td> 
<td width="230"><table width="225" border="0" align="center" cellpadding= 
"0" cellspacing="0" class="border"> 
<ET> 
<td width="31" height="25" align="center" background="images/ menu bgl. 
gif" class="font 01"><img src="images/icon keyword.gif" width="16" 
height="16" /></td> 
<td width="148" background="images/menu bgl.gif" class="font 01"> 系 统 
通知 </td> 
<td width="44" background="images/menu bgl.gif" class="font 01"><a 
href="#"><img src="images/more.gif" width="29" height="11" border= 
"o" /></a></td> 
<ftr> 
<tr> 
<td height="150" colspan="3"><table width="96%" border="0" align= 
"center" cellpadding="0" cellspacing="0"> 
<tr> 
<td height="5" colspan="2"></td> 
</tr> 
<cr> 
<td height="20">° <a href="#"> 最 新 系统 通知 信息 列表 列 . . .</a></td> 
<td class="font 03">08-9</td> 
</tr> 
<tr> 
<td height="20">* <a href="#"> 最 新 系统 通知 信息 列表 列 . . .</a></td> 
<td class="font 03">08-9</td> 
</tr> 
<tr> 
<td height="20">* <a href="#"> 最 新 系统 通知 信息 列表 列 . . .</a></td> 
<td class="font 03">08-9</td> 
</tr> 
SELS 
<td height="20">。 <a href="#"> 最 新 系统 通知 信息 列表 列 . . .</a></td> 
<td class="font 03">08-9</td> 
</tr> 
<tr> 
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<td height="20">。 <a href-"#"> 最 新 系统 通知 信息 列表 列 . . .</a></td> 
<td class="font 03">08-9</td> 

</tr> 

tere 
<td height="20">* <a href="#"> 最 新 系统 通知 信息 列表 列 . . .</a></td> 
<td class="font_03">08-9</td> 

</tr> 

<tr> 
<td height="20">* <a href="#"> 最 新 系统 通知 信息 列表 列 . . .</a></td> 
<td class="font_03">08-9</td> 

</tr> 

<tr> 
<td width="81%" height="20">° <a href="#"> 最 新 系统 通知 信息 列表 
列 ...</a></td> 
<td width="19%" class="font 03">08-9</td> 

</tr> 

<tr> 
<td height="5" colspan="2"></td> 

</tr> 

</table></td> 
</tr> 
</table></td> 
</tr> 
</table> 
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ef 以 上 代码 中 使 用 了 放 套 的 table， 代 码 结构 相对 较 复 杂 ， 所 以 在 设计 时 须 小 
To oou, RARAN, 


22.3.5 ”中间 主体 第 二 栏 
中 间 主 体 第 二 栏 包括 “企业 简介 ”“ 信 息 搜索 ”“ 资 源 调度 ”3 个 小 模块 ， 实 现 效果 如 





图 22-7 所 示 。 
等 企业 介绍 9 电网 调度 信息 列表 电 同调 度 信 ， 
车 领导 成 员 9 电网 调度 信息 列表 电网 调度 信 ， 
P 组 只 机 构 9 电网 调度 信息 列表 电 同调 度 信 
P ELMER a HEALE BAR NARA. 





等 企业 发 展 战 略 a 电网 调度 信息 列表 电网 调度 信 ， 


图 22-7 中间 主 体 第 二 栏 
完成 主体 第 二 栏 的 具体 代码 如 下 : 


<table width="1003" border="0" align="center" cellspacing="0"> 
// 为 了 避免 栏目 之 间 相隔 太 近 ， 使 页 面 拥挤 ， 在 两 个 通栏 中 间 加 入 一 个 高 度 为 5 的 空白 通栏 。 
<tr> 
<td height="5"></td> 
</tr> 
</table> 
<table width="1003" border="0" align="center" cellspacing="0"> 
<tr> 
<td width="230"><table width="225" border="0" align="center" cellpadding= 


p 


"0" cellspacing="0" class="border"> 
<tr> 
<td width="31" align="center" background="images/menu bgl.gif" class= 
"font_01"><img src="images/icon_keyword.gif" width="16" 
height="16" /></td> 
<td width="148" height="25" background="images/menu bgl.gif" class= 
"font 01"> 企 业 简介 </td> 


<td width="44" background="images/menu bgl.gif" class="font_01"><a 
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href="#"><img src="images/more.gif" width="29" height="11" border= 
"o" /></a></td> 

EGES 

<tr> 


<td colspan="3"><table width="95%" border="0" align="center" cellpadding= 
"0" cellspacing="0"> 
<tr> 
<td width="10%"></td> 
<td width="90%" height="5"></td> 
</tr> 
<tr> 
<td align="center"><img src="images/about b.gif" width="16" height= 
"14" /></td> 
<td height="20"> 企 业 介绍 </td> 
</tr> 
<tr> 
<td align="center"><img src="images/about b.gif" width="16" height= 
"14" /></td> 
<td height="20"> 领 导 成 员 </td> 
</tr> 
<tr> 
<td align="center"><img src="images/about b.gif" width="16" height= 
"14" /></td> 
<td height="20"> 组 织 机 构 </td> 
</tr> 
<tr> 
<td align="center"><img src="images/about_b.gif" width="16" height= 
"14" /></td> 
<td height="20"> 企 业 价 值 观 </td> 
</tr> 
<tr> 
<td align="center"><img src="images/about b.gif" width="16" height= 
"14" /></td> 
<td height="20"> 企 业 发 展 战略 </td> 
</tr> 
<tr> 
<td></td> 
<td height="5"></td> 
</tr> 
</table></td> 
</tr> 
</table></td> 
<td width="5">é&nbsp; </td> 
<td><table width="100%" border="0" cellpadding="0" cellspacing="0"> 
<tr> 
<td height="25" align="center"><table width="100%" border="0" cellpadding= 





WY, 
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"0" cellspacing="0" class="border3"> 
<form id="forml" name="form1" method="post" action=""> <tr> 
<td width="14%" align="right"><strong>faB@#: </strong></td> 
<td width="26%"> 
<input name="textfield" type="text" class="input border" value= 
"请 输入 关键 词 " size="18" /> 
</td> 
<td width="10%"><img src="images/sousuo.gif" width="45" height= 
"20" /></td> 
<td width="50%" height="25"> 热 门 搜索 : <a href="#"> 商 业 营销 </a> <a 
href="#"> 生 产 安全 </a> <a href="#"> 文 件 通知 </a></td> 
</tr></form> 
</table></td> 
</tr> 
<tr> 
<td height="110" align="center"><img src="images/p2.jpg"/></td> 
</tr> 





</table></td> 
<td width="5">&nbsp; </td> 
<td width="230"><table width="225" border="0" align="center" cellpadding= 
"0" cellspacing="0" class="border"> 
<tr> 
<td width="31" align="center" background="images/menu bgl.gif" class= 
"font 01"><img src="images/icon keyword.gif" width="16" 
height="16" /></td> 
<td width="148" height="25" background="images/menu bgl.gif" class= 
"font 01"> 资 源 调度 </td> 
<td width="44" background="images/menu_bgl.gif" class="font_01"><a 
href="#"><img src="images/more.gif" width="29" height="11" border= 
"o" /></a></td> 
</tr> 
<tr> 
<td colspan="3"><table width="95%" border="0" align="center" cellpadding= 
"0" cellspacing="0"> 
SELS 
<td width="11%"></td> 
<td width="89%" height="5"></td> 
</tr> 
<tr> 
<td align="center"><img src="images/let.jpg" width="5" height: 
/></td> 
<td height="20"><a href="#"> 电 网 调度 信息 列表 电网 调度 信 . . </a></td> 
</tr> 
<tr> 
<td align="center"><img src="images/let.jpg" width="5" height="5" 
/></td> 
<td height="20"><a href="#"> 电 网 调度 信息 列表 电网 调度 信 . . .</a></td> 
</tr> 
KETS 
<td align="center"><img src="images/let.jpg" width="5" height="5" /> 
</td> 
<td height="20"><a href="#"> 电 网 调度 信息 列表 电网 调度 信 . . </a></td> 


</tr> 





<tr> 
<td align="center"><img src="images/let.jpg" width="5" height="5" /> 
</td> 
<td height="20"><a href="#"> 电 网 调度 信息 列表 电网 调度 信 . . «</a><a href= 
"#"></a></td> 
</tr> 
<tr> 
<td align="center"><img src="images/let.jpg" width="5" height="5" 
{></td> 
<td height="20"><a href="#"> 电 网 调度 信息 列表 电网 调度 信 . . </a></td> 
</tr> 
<tr> 
<td></td> 
<td height="5"></td> 
</tr> 
</table></td> 
</tr> 
</table></td> 
</tr> 
</table> 


o ， 在 本 段 代码 的 开始 插入 了 一 个 空白 通栏 ， 其 意义 是 提供 模块 间隙 ， 避 免 页 面 


22.3.6 中 间 主 体 第 三 栏 


中 间 主 体 第 三 栏 包括 “企业 党 建 ”“ 领 导 讲 话 ”“ 管 理 动态 ”“ 电 力 服务 ”4 个 小 模块 ， 
实现 效果 如 图 22-8 所 示 。 


日 领导 讲话 日 wane 

领导 讲话 信息 标题 可 SRM eRe 
企业 党 建 信息 列表 企业 党 建 信 虹 。 诗话 信息 标题 了 表 首 理 动态 信息 标题 列表 [ 鸯 质 服务 】 忧 质 服务 标题 信息 列表 
企业 党 建 信息 列表 企业 党 建 信 ASUS ORE et tt ed [ 行 风 建设] 行 风 建 设 标题 信息 列表 
企业 党 建 信息 列表 企业 党 建 个 领导 讲话 信息 标题 让 表 pause CHAIRS) RAR RMN LE 
EULER URE RRA 领导 讲话 信息 标题 列表 “nage TESA [ 行 风 建设] 行 风 建 设 标题 信息 列表 





EINE BAREEN peace HMR) HERRENE RE 
企业 党 建 信息 列表 企业 党 当 信 [ 行 风 建设 ] 行 风 建 设 标题 信息 列表 


企业 党 建 信息 列表 企业 党 建 全 MEARS] 忧 质 服务 标题 信息 列表 ， 
企业 党 建 信息 列表 企业 党 建 信 [ 行 风 建 设 ] 行 风 建 设 标题 信息 列表 , 
企业 党 津 信息 列表 企业 党 建 入 [优质 服务 】 忧 质 服务 标题 信息 列表 . 
企业 党 建 信息 列表 企业 党 建 信 [ 行 风 建 设 ] 行 风 建 设 标题 信息 列表 ， 


22-8 中间 主体 第 三 栏 


领导 齐 话 信息 标题 列表 ， 








完成 主体 第 三 栏 的 具体 代码 如 下 : 

<table width="1003" border="0" align="center" cellspacing="0"> 
<tr> 

<td height="5"></td> 

</tr> 

</table> 

<table width="1003" border="0" align="center" cellspacing="0"> 
<tr> 


<td width="230"><table width="225" border="0" align="center" cellpadding= 
"0" cellspacing="0" class="border"> 
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<tr> 
<td width="31" align="center" background="images/menu_bgl.gif" class= 
"font 01"><img src="images/icon keyword.gif" width="16" 
height="16" /></td> 
<td width="148" height="25" background="images/menu bgl.gif" class= 
"font_01"> 企 业 党 建 </td> 
<td width="44" background="images/menu bgl.gif" class="font 01"><a 
href= "#"><img src="images/more.gif" width="29" height="11" 
border= "0" /></a></td> 
</tr> 
<tr> 
<td cols] ="3"><table width="95%" border="0" align="center" cellpadding= 
"0" cellspacing="0"> 
<tr> 
<td width="11%"></td> 
<td width="89%" height="5"></td> 
</tr> 
<tr> 
<td align="center"><img src="images/let.jpg" width="5" height: 
/></td> 
<td height="20"><a href="#"> 企 业 党 建 信息 列表 企业 党 建 信 . . .</a></td> 
</tr> 
<tr> 
<td align="center"><img src="images/let.jpg" width="5" height="5" 
/></td> 
<td height="20"><a href="#"> 企 业 党 建 信息 列表 企业 党 建 信 . . .</a></td> 
</tr> 
<tr> 
<td align="center"><img src="images/let.jpg" width="5" height: 
/></td> 
<td height="20"><a href="#"> 企 业 党 建 信息 列表 企业 党 建 信 . . .</a></td> 
</tr> 
<tr> 
<td align="center"><img src="images/let.jpg" width="5" height="5" 
/></td> 
<td height="20"><a href="#"> 企 业 党 建 信息 列表 企业 党 建 信 . . .</a></td> 
</tr> 
<tr> 
<td align="center"><img src="images/let.jpg" width="5" height: 
/></td> 
<td height="20"><a href="#"> 企 业 党 建 信息 列表 企业 党 建 信 . . .</a></td> 
</tr> 
<tr> 
<td align="center"><img src="images/let.jpg" width="5" height="5" 
/></td> 
<td height="20"><a href="#"> 企 业 党 建 信息 列表 企业 党 建 信 . . .</a></td> 
</tr> 
<tr> 
<td align="center"><img src="images/let.jpg" width="5" height="5" 
/></td> 
<td height="20"><a href: 
</tr> 
<tr> 
<td align="center"><img src="images/let.jpg" width="5" height="5" 

















"#"> 企 业 党 建 信息 列表 企业 党 建 信 . . .</a></td> 





mw) 


/></td> 
<td height="20"><a href="#"> 企 业 党 建 信息 列表 企业 党 建 信 . . .</a></td> 
Sir 
<tr> 
<td align="center"><img src="images/let.jpg" width="5" height: 
/></td> 
<td height="20"><a href: 
</tr> 
<tr> 
<td align="center"><img src="images/let.jpg" width="5" height="5" 
/></td> 
<td height="20"><a href="#"> 企 业 党 建 信息 列表 企业 党 建 信 . . .</a></td> 
</tr> 
<ET> 
<td></td> 
<td height="5"></td> 
</tr> 
</table></td> 
</tr> 
</table></td> 
<td width="5">&nbsp; </td> 
<td><table width="100%" border="0" cellspacing="0" cellpadding="0"> 
<ET> 
<td><table width="255" border="0" cellpadding="0" cellspacing="0" 
class="border2"> 
<ET> 
<td height="25" bgcolor="#fff7d6"><span class="font 01">&nbsp; 
<img src="images/up.gif" width="11" height="11" /></span> 领导 讲 
</td> 
</tr> 
<tr> 
<td><table width="100%" border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td height="5" colspan="2"></td> 
</tr> 
<tr> 
<td width="38%" rowspan="6"><table width="100%" border="0" 
cellspacing="0" cellpadding="0"> 
<tr> 
<td align="center"><table width="74" height="84" border= 
"0" cellpadding="0" cellspacing="0" class="ima_border"> 
<tr> 
<td><a href="#"><img src="images/3.jpg" width="70" height= 
"80" border="0" /></a></td> 
</tr> 
</table></td> 
</tr> 
SETS 
<td height="25" align="center"><a href="#"> 信 息 标题 </a> </td> 
</tr> 
</table></td> 
<td width="62%" height="20"><a href="#"> 领 导 讲 话 信息 标题 列表 . . . </a></td> 
</tr> 
<tr> 





"#"> 企 业 党 建 信息 列表 企业 党 建 信 . . .</a></td> 
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<td height="20"><a href="#"> 领 导 讲话 信息 标题 列表 . ..</a></td> 
</tr> 
<tr> 
<td height="20"><a href="#"> 领 导 讲 话 信息 标题 列表 . . .</a></td> 
</tr> 
<tr> 
<td height="20"><a href="#"> 领 导 讲话 信息 标题 列表 . . .</a></td> 
</tr> 
<tr> 
<td height="20"><a href="#"> 领 导 讲 话 信息 标题 列表 . ..</a></td> 
</tr> 
<tr> 
<td height="20"><a href="#"> 领 导 讲 话 信息 标题 列表 . ..</a></td> 
</tr> 
<tr> 
<td height="5" colspan="2"></td> 
</tr> 
</table></td> 
</tr> 
</table></td> 
<td><table width="255" border="0" align="right" cellpadding="0" 
cellspacing="0" class="border2"> 
<tr> 
<td height="25" bgcolor="#fff7d6"><span class="font 01">é&nbsp; 
<img src="images/up.gif" width="11" height="11" /></span> 管理 动 
态 </td> 
</tr> 
<tr> 
<td><table width="100%" border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td height="5" colspan="2"></td> 
</tr> 
<tr> 
<td width="38%" rowspan="6"><table width="100%" border="0" 
cellspacing="0" cellpadding="0"> 
<tr> 
<td align="center"><table width="74" height="84" border=' 
cellpadding="0" cellspacing="0" class="ima border"> 
<tr> 
<td><a href="#"><img src="images/baimingl.jpg" 
width="70" height="80" border="0" /></a></td> 
</tr> 
</table></td> 
</tr> 
<tr> 
<td height="25" align="center"><a href="#"> 信 息 标题 </a> 
</td> 
</tr> 
</table></td> 
<td width="62%" height="20"><a href="#"> 管 理 动态 信息 标题 列表 . . . 
</a></td> 
</tr> 
<tr> 


<td height="20"><a href="#"> 管 理 动态 信息 标题 列表 . . .</a></td> 











@s 
EJ- 
第 
</tr> N 
<tr> = 
<td height="20"><a href="#"> 管 理 动态 信息 标题 列表 . . .</a></td> 
</tr> 制 
<tr> = 作 
<td height="20"><a href="#"> 管 理 动态 信息 标题 列表 . . .</a></td> 企 
</tr> 业 
<tr> 站 
<td height="20"><a href="#"> 管 理 动态 信息 标题 列表 . . .</a></td> 户 
</tr> 类 
<tr> 网 
<td height="20"><a href="#"> 管 理 动态 信息 标题 列表 . . .</a></td> ee 
</tr> 
<tr> 
<td height="5" colspan="2"></td> 
</tr> 
</table></td> 
</tr> 
</table></td> 
</tr> 
</table> 
<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td height="5"></td> 
</tr> 
<tr> 


<td height="70" align="center"><td height="110" align="center"> 
<img src="images/p3.jpg"/></td></td> 
</tr> 
</table></td> 
<td width="5">&nbsp; </td> 
<td width="230"><table width="225" border="0" align="center" cellpadding= 
"0" cellspacing="0" class="border"> 
<tr> 
<td width="31" align="center" background="images/menu bgl.gif" class= 
"font 01"><img src="images/icon keyword.gif" width="16" 
height="16" /></td> 
<td width="148" height="25" background="images/menu bgl.gif" class= 
"font 01"> 电 力 服务 </td> 
<td width="44" background="images/menu bgl.gif" class="font 01"><a 
href="#"><img src="images/more.gif" width="29" height="11" 
border="0" /></a></td> 
</tr> 
LETS 
<td colspan="3"><table width="95%" border="0" align="center" cellpadding= 
"0" cellspacing="0"> 
<tr> 
<td height="5"></td> 
</tr> 
<tr> 
<td height="20"> [优质 服务 ] <a href="#"> 优 质 服务 标题 信息 列表 . . . 
</a></td> 
二 /EPE> 
<tr> 
<td height="20">[ 行 风 建设 ] <a href="#"> 行 风 建设 标题 信息 列表 . . . 
</a></td> 
</tr> 
<tr> 
<td height="20">[ 优 质 服务 ] <a href="#"> 优 质 服务 标题 信息 列表 . . . 


</a></td> 


My 
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<td height="20">[ 行 风 建设 ] <a href="#"> 行 风 建设 标题 信息 列表 . . . 
</a></td> 
</tr> 


<tr> 
<td height="20"> [优质 服务 ] <a href="#"> 优 质 服务 标题 信息 列表 . . . 
</a></td> 
</tr> 
<tr> 
<td height="20">[ 行 风 建 设 ] <a href="#"> 行 风 建 设 标题 信息 列表 - . . 
</a></td> 
</tr> 





<tr> 
<td height="20"> [优质 服务 ] <a href="#"> 优 质 服务 标题 信息 列表 . . . 
</a></td> 
</tr> 
<tr> 
<td height="20">[ 行 风 建设 ] <a href="#"> 行 风 建 设 标题 信息 列表 . . . 
</a></td> 
</tr> 


<tr> 
<td height="20"> [优质 服务 ] <a href="#"> 优 质 服务 标题 信息 列表 . . . 
</a></td> 
</tr> 
<tr> 
<td height="20">[ 行 风 建设 ] <a href="#"> 行 风 建 设 标题 信息 列表 . . - 
</a></td> 
</tr> 


<tr> 
<td height="5"></td> 
</tr> 
</table></td> 
</tr> 
</table></td> 
</tr> 
</table> 


22.3.7 ”中间 主体 第 四 栏 


中 间 主 体 第 四 栏 包括 “本 局 二 级 单位 站 点 连接 ”“ 安 全 生产 ”“ 商 业 营 销 ”“ 专 题 专 
栏 ”4 个 小 模块 ， 实 现 效果 如 图 22-9 所 示 。 








R Pazamai O0 | | mumn | 
安全 生产 信息 标 时 列表 RANA CEESE) 专题 栏目 标题 信息 列表 
安全 生产 信息 标本 刘表 PERSE) 专题 栏目 标题 信 让 列表 
安全 生产 信息 标 村 列表 GEESE) 专题 栏目 标题 信息 列表 
amez 安全 生产 信息 奈 是 列表 (EXCH) 专题 栏目 标题 入 外 列表 
信息 标题 。 安全 生 六 信息 标题 列表 cone | 商业 营销 信 息 标明 DERGE 专题 栏目 标题 入 息 列表 
安全 生产 信息 标题 列 表 商业 营销 信息 标题 列表 DERGE BERRAET 





22-9 中 间 主 体 第 四 栏 


完成 主体 第 四 栏 的 具体 代码 如 下 : 


<table width="1003" border="0" align="center" cellspacing="0"> 
<tr> 





5"></td> 


<table width="1003" border="0" align="center" cellspacing="0"> 
cr 
<td width="230"><table width="225" border="0" align="center" cellpadding= 
"0" cellspacing="0" class="border"> 
<tr> 
<td width="31" align="center" background="images/menu bgl.gif" class= 
"font 01"><img src="images/icon keyword.gif" width="16" 
height="16" /></td> 
<td width="148" height="25" background="images/menu bgl.gif" class= 
"font 01"> 本 局 二 级 单位 站 点 连接 </td> 
<td width="44" background="images/menu bgl.gif" class="font 01"><a 
href="#"><img src="images/more.gif" width="29" height="11" border= 
"o" /></a></td> 
</tr> 
<tr> 
<td colspan="3"><table width="95%" border="0" align="center" cellpadding= 
"0" cellspacing="0"> 
SELS 
<td></td> 
<td height="5"></td> 
</tr> 
<tr> 
<td>&nbsp; </td> 
<td height="20">&nbsp; </td> 
</tr> 
<tr> 
<td>&nbsp; </td> 
<td height="20">&nbsp; </td> 
</tr> 
<tr> 
<td>&nbsp; </td> 
<td height="20">&nbsp; </td> 
</tr> 
<tr> 
<td height="20" colspan="2" alig: ="center"> 显 示 格 式 </td> 
</tr> 
<tr> 
<td>&nbsp; </td> 
<td height="20">&nbsp; </td> 
</tr> 
<tr> 
<td>é&nbsp; </td> 
<td height="20">&nbsp; </td> 
</tr> 
<tr> 
<td></td> 
<td height="5"></td> 


SEMDiehaa aizew © 
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</tr> 
</table></td> 
RELS 
</table></td> 
<td width="5">&nbsp; </td> 
<td><table width="100%" border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td><table width="255" border="0" cellpadding="0" cellspacing="0" 
class="boeder4"> 
<tr> 
<td height="25" bgcolor="#d4fde7"><span class="font 01">é&nbsp; 
<img src="images/up.gif" width="11" height="11" /></span> 安全 生 


产 </td> 
</tr> 


<tr> 
X <td><table width="100%" border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td height="5" colspan="2"></td> 
</tr> 
<tr> 
<td width="38%" rowspan="6"><table width="100%" border="0" 
cellspacing="0" cellpadding="0"> 
<tr> 
<td align="center"><table width="74" height="84" border= 
"0" cellpadding="0" cellspacing="0" class="ima border"> 
<tr> 
<td><a href: "><img src="images/xinshoul.jpg" width= 
"70" height="80" border="0" /></a></td> 
</tr> 
</table></td> 
</tr> 
<tr> 
<td height="25" align="center"><a href="#"> 信 息 标题 </a></td> 
</tr> 
</table></td> 
<td width="62%" height="20"><a href="#"> 安 全 生产 信息 标题 列表 . . . 
</a></td> 
</tr> 
<tr> 
<td height="20"><a href="#"> 安 全 生产 信息 标题 列表 . . .</a></td> 
</tr> 
<tr> 
<td height="20"><a href="#"> 安 全 生产 信息 标题 列表 . . .</a></td> 
</tr> 
<tr> 
<td height="20"><a href="#"> 安 全 生产 信息 标题 列表 . . .</a></td> 
</tr> 
<tr> 
<td height="20"><a href="#"> 安 全 生产 信息 标题 列表 . ..</a></td> 
</tr> 
<tr> 
<td height="20"><a href="#"> 安 全 生产 信息 标题 列表 . . .</a></td> 
</tr> 
<tr> 





<td height="5" colspan="2"></td> 
</tr> 
</table></td> 
</tr> 
</table></td> 
<td><table width="255" border="0" align="right" cellpadding="0" 
cellspacing="0" class="border4"> 
<tr> 
<td height="25" bgcolor="#d4fde7"><span class="font 01">&nbsp; 
<img src="images/up.gif" width="11" height="11" /></span> 商业 营 
销 </td> 
</tr> 
<tr> 
<td><table width="100%" border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td height="5" colspan="2"></td> 
</tr> 
<tr> 
<td width="38%" rowspan="6"><table width="100%" border="0" 
cellspacing="0" cellpadding="0"> 
<tr> 
<td align="center"><table width="74" height="84" border= 
"0" cellpadding="0" cellspacing="0" class="ima border"> 
<tr> 
<td><a href="#"><img src="images/1.jpg" width="70" 
height="80" border="0" /></a></td> 
</tr> 
</table></td> 
</tr> 
<tr> 
<td height="25" align="center"><a href="#"> 信 息 标题 </a></td> 
</tr> 
</table></td> 
<td width="62%" height="20"><a href="#"> 商 业 营 销 信息 标题 列表 . . . 
</a></td> 
</tr> 
<tr> 
<td height="20"><a href="#"> 商 业 营 销 信 息 标题 列表 . . .</a></td> 
</tr> 
<tr> 
<td height="20"><a href="#"> 商 业 营销 信息 标题 列表 . . .</a></td> 
</tr> 
<tr> 
<td height="20"><a href="#"> 商 业 营销 信息 标题 列表 . . .</a></td> 
</tr> 
<Er 
<td height="20"><a href="#"> 商 业 营销 信息 标题 列表 . . .</a></td> 
</tr> 
<tr> 
<td height="20"><a href="#"> 商 业 营 销 信息 标题 列表 . ..</a></td> 
</tr> 
<tr> 
<td height="5" colspan="2"></td> 
</tr> 
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</table></td> 
</tr> 
</table></td> 
</tr> 
</table></td> 
<td width="5">&nbsp; </td> 
<td width="230"><table width="225" border="0" align="center" cellpadding= 
"0" cellspacing="0" class="border"> 
<tr> 
<td width="31" align="center" background="images/menu bgl.gif" class= 
"font 01"><img src="images/icon keyword.gif" width="16" 
height="16" /></td> 
<td width="148" height="25" background="images/menu bgl.gif" class= 
"font 01"> 专 题 专 栏 </td> 
<td width="44" background="images/menu bgl.gif" class="font 01"><a 
href="#"><img src="images/more.gif" width="29" height="11" border= 
"o" /></a></td> 
</tr> 
<tr> 
<td colspan="3"><table width="95%" border="0" align="center" cellpadding= 
"0" cellspacing="0"> 
<tr> 
<td height="5"></td> 
</tr> 
<tr> 
<td height="20">[ 某 某 专题 ] <a href="#"> 专 题 栏 目标 题 信息 列表 . . .</a></td> 
</tr> 
<tr> 
<td height="20"> [ 某 某 专题 ] <a href="#"> 专 题 栏 目标 题 信息 列表 . . .</a></td> 
</tr> 
<tr> 
<td height="20">[ 某 某 专题 ] <a href="#"> 专 题 栏目 标题 信息 列表 . . .</a></td> 
</tr> 
<tr> 
<td height="20">[ 某 某 专题 ] <a href="#"> 专 题 栏目 标题 信息 列表 . . .</a></td> 
</tr> 
LEES 
<td height="20">[ 某 某 专题 ] <a href="#"> 专 题 栏目 标题 信息 列表 . . .</a></td> 
</tr> 
kee 
<td height="20"> [ 某 某 专题 ] <a href="#"> 专 题 栏目 标题 信息 列表 . . .</a></td> 
</tr> 
<tr> 
<td height="5"></td> 
</tr> 
</table></td> 
</tr> 
</table></td> 
</tr> 
</table> 





22.3.8 中 间 主 体 第 五 栏 


中 间 主 体 第 五 栏 包括 “商业 系统 站 点 连接 ”“ 人 力 资 源 ” “法规 标 准 ”“ 视 频 中心 ”4 个 
小 模块 ， 实 现 效果 如 图 22-10 所 示 。 


Ld 
Oa 

















RR ie a 人 力 资 源 D 法 规 标准 
相关 站 点 连接 相关 站 点 连接 > 人 力 资 源 信息 列表 人 力 资源 信息 列表 > 读 规 标准 信息 列表 法 规 标准 信息 列表 - 
相关 站 点 连接 人 力 资源 信息 列表 人 力 资 源 信息 列表 - 法 规 标准 信息 列表 法 规 标准 信息 列表 、 
ARMAS 人 力 资源 信息 列表 人 力 资源 信息 列表 法 规 标准 信息 列表 法 规 标准 信息 列表 显示 格式 
相关 站 点 连接 人 力 资源 信息 列表 人 力 资源 信息 列表 . 法 规 标准 信息 列表 法 规 标 准 信息 列表 . 
相关 站 点 连接 相关 站 点 连接 ADB BAR| ARB BIR. RUE BARRA Ea BNR. 
相关 站 点 连接 相关 站 点 连接 > 人 力 资 源 信息 列表 人 力 资源 信息 列表 法 规 标 众 信 息 列表 法 规 标准 信息 列表 . 














2210 中间 主体 第 五 栏 
完成 主体 第 五 栏 的 具体 代码 如 下 : 


<table width="1003" border="0" align="center" cellspacing="0"> 
<tr> 
<td height="5"></td> 
</tr> 
</table> 
<table width="1003" border="0" align="center" cellspacing="0"> 
<tr> 
<td width="230"><table width="225" border="0" align="center" cellpadding= 
"0" cellspacing="0" class="border"> 
<tr> 
<td width="31" align="center" background="images/menu bgl.gif" class= 
"font_01"><img src="images/icon_keyword.gif" width="16" 
height="16" /></td> 
<td width="148" height="25" background="images/menu_bgl.gif" class= 
"font 01"> 商 业 系统 站 点 连接 </td> 
<td width="44" background="images/menu_bgl.gif" class="font_01"><a 
href="#"><img src="images/more.gif" width="29" height="11" 
border="0" /></a></td> 
</tr> 
<tr> 
<td colspan="3"><table width="95%" border="0" align="center" cellpadding= 
"0" cellspacing="0"> 
LETS 
<td width="50%"></td> 
<td width="50%" height="5"></td> 
</tr> 
<tr> 
<td align="center"><a href="#"> 相 关 站 点 连接 </a></td> 
<td height="20" align="center"><a href="#"> 相 关 站 点 连接 </a></td> 
</tr> 
<tr> 
<td align="center"><a href="#"> 相 关 站 点 连接 </a></td> 
<td height="20" align="center"><a href="#"> 相 关 站 点 连接 </a></td> 
</tr> 
<tr> 
<td align="center"><a href="#"> 相 关 站 点 连接 </a></td> 
<td height="20" align="center"><a href="#"> 相 关 站 点 连接 </a></td> 
</tr> 
<tr> 
<td align="center"><a href="#"> 相 关 站 点 连接 </a></td> 
<td height="20" align="center"><a href="#"> 相 关 站 点 连接 </a></td> 
</tr> 
Ser 
<td align="center"><a href="#"> 相 关 站 点 连接 </a></td> 
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<td height="20" align="center"><a href="#"> 相 关 站 点 连接 /a></td> 
</tr> 
<tr> 
<td align="center"><a href="#"> 相 关 站 点 连接 </a></td> 
<td height="20" align="center"><a href="#"> 相 关 站 点 连接 </a></td> 
</tr> 
<tr> 
<td></td> 
<td height="5"></td> 
</tr> 
</table></td> 
</tr> 


N </table></td> 
\ <td width="5">&nbsp; </td> 


NX <td><table width="100%" border="0" cellspacing="0" cellpadding="0"> 
、 <tr> 
<td><table width="255" border="0" cellpadding="0" cellspacing="0" 
class="border"> 
<tr> 
<td height="25" bgcolor="#d6e8ff"><span class="font 01">&nbsp; 
<img src="images/up.gif" width="11" height="11" /></span> AWK 
Wi</td> 
</tr> 
<tr> 
<td><table width="100%" border="0" cellspacing="0" cellpadding=" 
<tr> 
<td width="12%"></td> 
<td width="88%" height="5"></td> 
</tr> 
<tr> 
<td align="center"><img src="images/i30.gif" width="7" height= 
"10" /></td> 
<td height="20"><a href="#"> 人 力 资源 信息 列表 人 力 资源 信息 列表 . . . 
</a></td> 
</tr> 
<tr> 
<td align="center"><img src="images/i30.gif" width="7" height= 
"10" /></td> 
<td height="20"><a href="#"> 人 力 资源 信息 列表 人 力 资源 信息 列表 . . . 
</a></td> 
</tr> 
<tr> 
<td align="center"><img src="images/i30.gif" width="7" height= 
"10" /></td> 
<td height="20"><a href="#"> 人 力 资源 信息 列表 人 力 资源 信息 列表 . . . 
</a></td> 
</tr> 
<tr> 
<td align="center"><img src="images/i30.gif" width="7" height= 
"10" /></td> 
<td height="20"><a href="#"> 人 力 资源 信息 列表 人 力 资源 信息 列表 . . . 
</a></td> 
</tr> 
<tr> 








<td align="center"><img src="images/i30.gif" width="7" height= 


wD /td> 
<td height="20"><a href="#"> 人 力 资源 信息 列表 人 力 资源 信息 列表 .. . 
</a></td> 
EC 
<tr> 


<td align="center"><img src="images/i30.gif" width="7" height= 


"10" /></td> 
<td height="20"><a href="#"> 人 力 资源 信息 列表 人 力 资源 信息 列表 . . . 
</a></td> 
</tr> 
<tr> 
<td></td> 
<td height="5"></td> 
</tr> 
</table></td> 
</tr> 
</table></td> 
<td><table width="255" border="0" align="right" cellpadding="0" 
cellspacing="0" class="border"> 
<tr> 
<td height="25" bgcolor="#d6e8ff"><span class="font 01">&nbsp; 


<img src="images/up.gif" width="11" height="11" /></span> 法 规 标 


准 </tq> 
</tr> 
Sor 
<td><table width="100%" border="0" cellspacing="0" cellpadding=" 
<tr> 
<td width="12%"></td> 
<td width="88%" height="5"></td> 
</tr> 
<tr> 


<td align="center"><img src="images/i30.gif" width="7" height= 


"10" /></td> 
<td height="20"><a href="#"> 法 规 标准 信息 列表 法 规 标准 信息 列表 . . . 
</a></td> 
</tr> 
<tr> 


<td align="center"><img src="images/i30.gif" width="7" height= 


"10" /></td> 
<td height="20"><a href="#"> 法 规 标准 信息 列表 法 规 标准 信息 列表 . . . 
</a></td> 
</tr> 
<tr> 


<td align="center"><img src="images/i30.gif" width="7" height= 


"19% ></td> 
<td height="20"><a href="#"> 法 规 标 准 信息 列表 法 规 标 准 信息 列表 . . . 
</a></td> 
</tr> 
<tr> 


<td align="center"><img src="images/i30.gif" width="7" height= 


"10" /></td> 
<td height="20"><a href="#"> 法 规 标准 信息 列表 法 规 标准 信息 列表 . . . 


</a></td> 
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</tr> 
<tr> 
<td align="center"><img src="images/i30.gif" width="7" height= 
ke he b> 
<td height="20"><a href="#"> 法 规 标准 信息 列表 法 规 标准 信息 列表 . . . 
</a></td> 
</tr> 
<tr> 
<td align="center"><img src="images/i30.gif" width="7" height= 
"10" /></td> 
<td height="20"><a href="#"> 法 规 标准 信息 列表 法 规 标 准 信息 列表 . . . 
</a></td> 
</tr> 
<tr> 
<td></td> 
<td height="5"></td> 
</tr> 
</table></td> 
</tr> 
</table></td> 


</tr> 

</table></td> 

<td width="5">&nbsp; </td> 

<td width="230"><table width="225" border="0" align="center" cellpadding= 
"0" cellspacing="0" class="border"> 
<tr> 


<td width="31" align="center" background="images/menu bgl.gif" class= 
"font 01"><img src="images/icon keyword.gif" width="16" 
height="16" /></td> 

<td width="148" height="25" background="images/menu bgl.gif" class= 
"font_01"> 视 频 中 心 </td> 

<td width="44" background="images/menu bgl.gif" class="font 01"><a href= 
"#"><img src="images/more.gif" width="29" height="11" border="0" 
/></a></td> 


</tr> 
<tr> 


<td colspan="3"><table width="100%" border="0" cellspacing="0" cellpadding= 
“o> 
<tr> 
<td height="5"></td> 
</tr> 
<tr> 
<td height="20">&nbsp; </td> 
</tr> 
<tr> 
<td height="20">&nbsp; </td> 
</tr> 
<tr> 
<td height="20" align="center"> 显 示 格 式 </td> 
</tr> 
RELS 
<td height="20">&nbsp;</td> 
</tr> 
<tr> 


<td height="20">gnbsp;</td> 

</tr> 

<tr> 
<td height="20">&nbsp; </td> 

</tr> 

<tr> 
<td height="5"></td> 

</tr> 

</table></td> 
</tr> 
</table></td> 
</tr> 
</table> 


22.3.9 网 页 底部 
网 页 底部 一 般 会 有 备案 信息 和 一 些 快捷 链接 ， 实 现 效果 如 图 22-11 所 示 。 


关于 我 们 | 联系 我 们 | 网 站 声明 | 招聘 信息 | 网 站 地 图 | 友情 链接 


copyright © 2006 - 2018 vvv. com 


ARDS AS Akee M 





22-11 网 页 底部 

实现 网 页 底部 的 具体 代码 如 下 : 
<table width="1003" border="0" align="center" cellspacing="0"> 

<tr> 

<td height="5"></td> 

</tr> 
</table> 
<table width="1003" border="0" align="center" cellspacing="0" class="border3"> 

<tr> 


<td height="25" align="center"> 关 于 我 们 | 联系 我 们 | 网 站 声明 | 招聘 信息 | 网 站 
地 图 | 友情 链接 </td> 
</tr> 
</table> 
<table width="1003" border="0" align="center" cellpadding="0" cellspacing="0"> 
<tr> 
<td width="423" align="center">copyright &copy; 2006 - 2018 <a 
href=""><strong>vvv.com</strong></a><br /> 
</tr> 
</table> 


第 23 章 
制作 电子 商务 类 
网 页 


电子 商务 网 站 是 当前 比较 流行 的 一 类 网 站 。 随 着 网 络 购物 、 互 联网 交易 的 普 
及 ， 淘 宝 、 阿 里 巴巴 、 亚 马 逊 等 类 型 的 电子 商务 网 站 在 近 几 年 风靡 。 越 来 越 多 的 公司 
着 手 架 设 电子 商务 网 站 平台 。 本 章 介绍 如 何 制作 一 个 简单 的 电子 商务 类 网 页 。 


重点 案例 效果 
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网 页 主体 














网 页 底部 
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23.1 整体 布局 


电子 商务 类 网 页 主要 实现 网 络 购物 和 交易 ， 所 要 体现 的 组 件 相对 较 多 ， 主 要 包括 产品 
搜索 、 账 户 登录 、 广 告 推广 、 产 品 推荐 、 产 品 分 类 等 内 容 。 本 实例 最 终 的 网 页 效果 如 图 23-1 
所 示 。 
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23-1 电子 商务 类 网 页 效果 


23.1.1 设计 分 析 


作为 电子 商务 类 网 站 ， 主 要 是 提供 购物 交易 的 ， 因 此 要 体现 出 以 下 几 个 特性 。 
(1) 商品 检索 方便 。 要 有 商品 搜索 功能 ， 有 详细 的 商品 分 类 。 
(2) 有 产品 推广 功能 。 增 加 广告 活动 位 ， 帮 助 特色 产品 推广 。 


e 
410 


i) 


(3) 热门 产品 推荐 。 消 费 者 的 搜索 很 多 带 有 盲目 性 ， 所 以 可 以 设置 热门 产品 推荐 位 。 

(4) 对 于 产品 要 有 简单 准确 的 展示 信息 。 

(5) 页 面 整体 布局 要 清晰 有 条 理 ， 让 浏览 者 知道 在 网 页 中 如 何 快速 地 找到 自己 需要 的 
信息 。 


23.1.2 ”排版 架构 


本 实例 的 电子 商务 网 站 整体 上 还 是 上 、 中 、 下 的 架构 。 上 部 为 网 页 头 部 、 导 航 栏 、 热 门 
搜索 栏 ， 中 间 为 网 页 主要 内 容 ， 下 部 为 网 站 介绍 及 备案 信息 ， 如 图 23-2 所 示 。 
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网 页 头 部 








网 页 主体 











网 页 底部 | 





图 23-2 ”网 页 架构 


23.2 模块 组 成 


实例 中 整体 虽然 是 上 、 中 、 下 结构 ， 但 是 每 一 部 分 都 有 更 细致 的 划分 。 

(1) 上 部 主要 包括 网 页 头 部 、 导 航 栏 等 内 容 。 

(2) 中 间 主 体 主要 包括 商品 检索 模块 、 商 品 分 类 模块 、 热 销 专区 模块 等 。 

(3) 下 部 主要 包括 友情 链接 模块 、 快 速 访问 模块 、 网 站 注册 备案 信息 等 模块 。 
网 页 中 各 个 模块 的 划分 主要 依靠 <table> 标 签 实现 。 


23.3 制 fF > 又 
网 站 制作 要 逐步 完成 。 林 实例 中 网 页 制作 主要 包括 以 下 几 个 部 分 。 


23.3.1 ”样式 表 
为 了 更 好 地 实现 网 页 效果 ， 需 要 为 网 页 制作 CSS 样式 表 ， 制 作 样式 表 的 实现 代码 如 下 : 





/* reset */ 

html, body, div, span, applet, object, iframe, hl, h2, h3, h4, h5, h6, p, 
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, 
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, 


e 
1$ 
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dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 
tbody, tfoot, thead, tr, th, td { 
margin:0; 

padding:0; 

border:0; 
font-weight:inherit; 
font-style:inherit; 
font-size:100%; 
font-family:inherit; 
vertical-align:baseline 

$ 

ol, ul { 

list-style:none 

} 

table { 
border-collapse:collapse; 
border-spacing:0 

} 

caption, th, td { 
text-align:left; 
font-weight:normal; 

} 
blockquote:before, blockquote:after, q:before, q:after 
content:""; 

} 
blockquote, q { 

a nng 

} 
html, body { 

height:101%; 

J 
body { 

background:#fff; 
height:100%; 

padding:0; 
vertical-align:top; 

} 
/* Default HTML Elements 


/* Images */ 

img, a img { 
border:0pt none; 
vertical-align:bottom; 
} 


/* Reusables */ 
/* Misc classes */ 


-right f 

float:right !important; 
F 

zlefe f 

float:left; 


table, 


caption, 


-padd-top { 


padding-top:10px !important; 


ji 

-Cclear-left { 

clear:left; 

} 

.img-replace { 
background-position:0 0; 


background-repeat :no-repeat; 


display:block; 
padding:0; 
text-—indent :-9999px; 
} 

/* Grid Layout */ 
.container { 
margin:0 auto; 
padding-right:10px; 
padding-left:10px; 
width:940px; 

} 

-grid, .grid 1, .grid 2, 
display:inline; 
float:left; 
margin-left:0px; 
margin-right: 0px; 
padding-left:10px; 
} 

-grid_whatsnew { 
display:inline; 
float:right; 
margin-left: 0px; 
margin-right: 0px; 

} 

-no-grid { 
display:block; 
float:none; 

} 
-grid_whatsnew_IFrame { 
display:inline; 
float:left; 
margin-left: 0px; 
margin-right: 0px; 
padding-left:10px; 
padding-top: 287px; 
$ 

-begin { 
margin-left:0; 

j3 

-end { 
margin-right:0; 

t 

„container .grid 1 { 
width:145px; 


-grid 3, 


-grid 4, 


-grid 5, 


.grid 6, 


-arid Ty 
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} 

-container -grid 2 { 
width: 300px; 

$ 


.container .grid whatsnew { 


width:300px; 

t 

-container .grid 3 { 
width: 455px; 

} 

-container .grid 4 { 
width: 610px; 

} 

-container .grid 5 1 
width:765px; 

上 

-container .grid 6 { 
width: 920px; 

} 


-container .grid whatsnew IFrame 


display:inline; 
float:left; 
margin-left: 0px; 
margin-right: 0px; 
padding-left:10px; 
width: 300px; 
padding-top: 287px; 


} 


-container .grid 7 { 
width: 770px; 


} 


/* add extra space before */ 


-container .ahead 1 { 
padding-left :155px; 


} 


.Container .ahead 2 { 
padding-left :310px; 


} 


-container .ahead 3 { 
padding-left: 465px; 


} 


.container .ahead 4 { 
padding-left:620px; 


} 


.container .ahead 5 { 
padding-left:775px; 


$ 


/* add extra space after */ 


.container .behind 1 { 
padding-right:155px; 


} 


-container -behind 2 { 
padding-right :310px; 


-Container .behind 3 { 
padding-right :465px; 
$ 

-Container .behind 4 { 
padding-right: 620px; 
$ 

-Container .behind 5 { 
padding-right:775px; 
} 

/* move item forward */ 
-container .move 1 { 
left:155px; 

} 

.container .move 2 { 
left:310px; 

} 

.container .move 3 { 
left:465px; 

} 

.container .move 4 { 
left:620px; 

i 

.container .move 5 { 
left:775px; 

} 

/* move item back */ 
-container .remove 1 { 
left:-155px; 

} 

.Container .remove 2 { 
left :-310px; 

} 

-container .remove 3 { 
left :-465px; 

} 

.Container .remove 4 { 
left:-620px; 

} 

.Container .remove 5 { 
left:-775px; 

} 

«clear { 

clear:both; 
display:block; 
overflow:hidden; 
visibility:hidden; 
width:0; 

height :0 

ji 

-Clearfix:after { 
clear:both; 

content:' '; 
display:block; 
font-size:0; 
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line-height:0; 
visibility:hidden; 
width:0; 

height:0 

$ 

-Clearfix { 

display: inline-block 

$ 

* html .clearfix { 
height :1% 

$ 

.Clearfix { 
display:block 

Mi 

/* fix the outline on firefox focus */ 
a:active { 

outline: none; 

} 

a:focus { 
-moz-outline-style: none; 
} 

/* 

** Markup free clearing 
** Details: http://www.positioniseverything.net/easyclearing.html 
es 

-clear-block:after { 
content: ma" 

display: block; 

height: 0; 

clear: both; 
visibility: hidden; 

} 

.Clear-block { 

display: inline-block; 

} 

.Clear { 

float: none; 

clear: both; 

} 

/* Hides from IE-mac \*/ 
* html .clear-block { 
height: 1%; 

} 

.Clear-block { 

display: block; 

} 

/* End hide from IE-mac */ 


/* kat's formatting -- facebox overlay for send to friend */ 
div#facebox { 

position: absolute; 

tops O7 

left: 0; 


z-index: 100; 
text-align: left; 
$ 
div#facebox div.popup { 
position: relative; 
} 
div#facebox div.body { 
$ 
div#facebox div#sendtofriend { 
padding: llpx; 
background: #fff; 
$ 
div#facebox div.content { 
width: 672px; 
2 
div#facebox .loading { /**/ 
width: 650px; 
height: 300px; 
text-align: center; 
background-color: transparent; 
} 
div#facebox h2#sendtofriend { 
background-image: 
url (http://www.woolworths.com.au/wps/woolworths/ images/title- 
sendtofriend.gif); 
background-repeat: no-repeat; 
background-position: top left; 
width: 222px; 
height: 26px; 
margin: 14px Opx Opx 10px; 
text-indent: -3001Px7 
} 
div#facebox div.note { 
Margin: 13px Opx 60px Opx; 
height: 300px; 
} 
div#facebox form ul { 
padding: 6px Opx Opx Opx; 
margin: 0; 
} 
div#facebox form ul li { 
float: left; 
display: inline; 
width: 373px; 
padding: 0px 0px 17px 0px; 
} 
div#facebox form ul li input.text { 
border: lpx solid #blblbl7 
height: 17px; 
width: 369px; 
} 
div#facebox form ul li.left { 
width: 247px; 
t 
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div#facebox form ul li.left input { 
width: 227px; 

$ 

div#facebox form label { 
width: 100%; 

padding: 0px 0px 5px 0px; 
$ 

div#facebox form textarea { 
width: 621px; 

border: lpx solid #blblbl; 
height: 79px; 

$ 

div#facebox input.btn-search { 
position: absolute; 
bottom: 36px; 

right: 105px; 

} 

div#facebox a.close { 
position: absolute; 
bottom: 36px; 

right: 10px; 

} 

div#facebox overlay { 
position: fixed; 

top: Opx; 

left: Opx; 

height :100%; 

width: 100%; 

} 

.facebox hide { 
z-index:-100; 

.facebox overlayBG { 
background-color: #000; 
z-index: 99; 

} 


/* overlay */ 


* html div#facebox_overlay { /* ie6 hack */ 

position: absolute; 

height: expression(document.body.scrollHeight > 
document .body.offsetHeight ? document.body.scrollHeight : 
document .body.offsetHeight + 'px'); 

} 


/* / kat's formatting -- facebox overlay for send to friend */ 


em 本 实例 中 的 样式 表 比较 多 ， 这 里 只 展示 一 部 分 ， 本 书 配套 资源 中 有 文字 的 代 
A 码 文件 。 


制作 完成 之 后 将 样式 表 保 存 到 网 站 根 目 录 下 ， 文 件 名 为 CSS 文件 夹 。 


制作 好 的 样式 表 ， 需 要 应 用 到 网 站 中 ， 所 以 在 网 站 主页 中 要 建立 CSS 的 链接 代码 。 链 接 
代码 需要 添加 在 <head> 标 签 中 ， 有 具体 代码 如 下 : 


e 
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<link rel="stylesheet" title="" media="screen" href="css/common.css" 
type="text/css" /> 
<link rel="stylesheet" title="" media="screen" href="css/text.css" 
type="text/css" /> 
<link rel="alternate stylesheet" title="large" media="screen" 
href="css/largeprint.css" type="text/css" /> 
<link rel="stylesheet" title="" media="screen" href="css/screen9.css" 
type="text/css" /> 
<p IE]> 

<link rel="stylesheet" title="" href="css/hacks.css" type="text/css" 
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/> 
<! [endi£]—-—> 


23.3.2 ”网 页 头 部 


网 页 头 部 主要 是 企业 Logo 和 一 些 快速 链接 ， 如 关于 我 们 、 食 品 知识 、 网 银 在 线 支付 等 。 
除 此 之 外 还 有 导航 菜单 栏 和 搜索 框 等 。 
本 实例 中 网 页 头 部 的 效果 如 图 23-3 所 示 。 
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A Sem  VPRRRE LOREM 美食 社区 食品 知识 网 站 帮助 网 银 在 线 支 付 。 ”关于 我 们 





23-3 ”网 页 头 部 
实现 网 页 头 部 的 详细 代码 如 下 : 


div id="header"> <a href="index.html" class="logoMain"><img 
src="img/woolworths-logo.png" width="230" height="57" /></a> 
<form class="hSearch" id="searchForm" method="post" > 
<fieldset> 
<label for="search"> 
<input id="search" class="hSearchText" type="text" onfocus= 
"this.value='';" value=" 请 输入 " name="search query"/> 
<input class="hSearchGo" type="image" src="img/search-btn-go.gif" 
value="Go"/> 
</label> 
</fieldset> 
</form> 
<ul id="navSub"> 
<li> <a href="#" > 登录 </a></1i> 
<li><a href="#" > 联系 我 们 </a></1i> 
<li><a href="#" target="new" > 注册 </a></1i> 
<li class="end"> <a href="#" title="Large Font" onclick= "setActiveStyleSheet 
('large'); return false; "> 放大 </a> <a href="#" title="normal font" 
class="small" onclick="setActiveStyleSheet ('default'); return false;"> 
缩小 </a> </1i> 
</ul> 
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23.3.3 主体 第 一 通栏 


网 页 中 间 主 体 的 第 一 通栏 主要 包括 选 购 商品 、 在 线 支 付 、 免 费 试 吃 、 冷 藏 物流 、 速 递 直 
达 、 客 户 服务 等 ， 具 体 效果 如 图 23-4 所 示 。 
Sa 


c s 
E m Se a 
迁移 商 品 TAH » SRS 
图 23-4 主体 第 一 通栏 


> ama > zaa > SARS > 
实现 主体 第 一 通栏 功能 的 具体 代码 如 下 : 


<div class="container clearfix" id="wrapper"> 
<div class="alternate" id="home"> 
<div class="grid 1" id="sidebar"> 
<ul> 
<li id="btn-whatsnew"><a href="#" ><span> 选 购 商 品 </span></a></1i> 
<li id="btn-specials"><a href="#" ><span> 在 线 支付 </span></a></1i> 
<li id="btn-shop"><a href="#" ><span> 免 费 试 吃 </span></a></1i> 
<li id="btn-work"><a href="#" ><span> 冷 藏 物流 </span></a></1i> 
<li id="btn-everyday"><a href="#" ><span> 速 递 直达 </span></a></1i> 
<li id="btn-recipes"><a href="#" ><span> 客 户 服务 </span></a></1i> 
</ul> 
</div> 


23.3.4 主体 第 二 通栏 
网 页 中 间 主 体 的 第 二 通栏 主要 是 热 销 商品 的 展示 ， 具 体 效果 如 图 23-5 所 示 。 


r < r 





» 








图 23-5 主体 第 二 通栏 


实现 主体 第 二 通栏 功能 的 具体 代码 如 下 : 


<div> 
<table width="930" height="310" border="0" align="center" 
cellpadding="0" cellspacing="0"> 
<tr> 
<td width="930" height="310" align="center"><div class=pic show 
style="width: 930px;"> 


<div id="imgADPlayer"></div> 


<script type="text/jscript" language="javascript"> 


PImgPlayer.addItem( "", 
PImgPlayer.addItem( "", 
PImgPlayer.addItem( "", 
PImgPlayer.addItem( "", 
PImgPlayer.addItem( "", 


ww, "img/01.jpg"); 
eee imo//02 = por). 
"", "img/03.jpg") 7 
mm "img/04.jpg") 7 
"", "img/05.jpg") 7 


PImgPlayer.init( "imgADPlayer", 930, 310 ); 


</script> 
</div></td> 
</tr> 
</table> 
</div> 


23.3.5 主体 第 三 通栏 


网 页 主体 的 第 三 通栏 主要 是 商品 分 类 模块 ， 具 体 效果 如 图 23-6 所 示 。 
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23-6 主体 第 三 通栏 
实现 主体 第 三 通栏 功能 的 具体 代码 如 下 : 


<div class="promotop grid" style="padding-top:10px;" > 
<h3><a href="#" > 梦幻 棉花 糖 </a></h3> 
<hr/> 
<a href="#" > <img src="img/promo-comm-grants [1] .jpeg~MOD=AJPERES&amp; 
CACHEID=24£d40004118e387ald6e9f9a5cf1c57.jpg" border="0" width="145" 
height="100" /> </a> 
<p> 棉 花 糖 莲 松 柔软 ， 入 口 即 溶 ， 口 味 甘甜 ， 深 受 很 多 年 轻 人 的 青睐 </P> 
<p><a href="#" class="arrow"> 详 细 内 容 </a></p> 
</div> 
<div class="promotop grid" style="padding-top:10px;" > 
<h3><a href="#" > 进口 食品 尝鲜 正当 时 </a></h3> 
<hr/> 
<a href="#" > <img src="img/FFM Annette 145x100.jpg~MOD=AJPERES&amp; 
CACHEID=e95e780041737cdab7a4bf5af93b836b.jpg" border="0" width="145" 
height="100" /> </a> 
<p> 基 于 绝 大 多 数 进口 食品 的 价格 都 高 于 市 面 上 同类 国产 食品 </p> 
<p><a href="#" target=" self" class="arrow"> 详 细 内 容 </a></p> 
</div> 
<div class="promotop grid" style="padding-top:10px;" > 
<h3><a href="#" > 美味 体验 : 美国 青豆 买 十 送 一 </a></h3> 


<hr/> 








HTML 5 网 页 设计 


案例 课堂 第 ?版 ) W 


<a href="#" > <img src="img/145x100 Agricultural .jpg~MOD=AJPERESéamp; 
CACHEID=a92f600041b6e21db6f8fF7e779acTb£4.jpg" border="0" width="145" 
height="100" /> </a> 
<p> 本 活动 精 选 八 款 商 品 ， 分 别 是 : 美国 青豆 芥末 味 (小 包装 ) 、 美 国 青豆 芥末 味 (大 包装 ) </p> 
<p><a href="#" class="arrow"> 详 细 内 容 </a></p> 
</div> 
<div class="promotop grid" style="padding-top:10px;" > 
<h3><a href="#" > 松 脆 好 口感 方形 威 化 饼 </a></h3> 
<hr/> 
<a href="#"> <img src="img/freshMarketUpdatePromoTile.jpg~MOD= AJPERES&amp; 
CACHEID=a0e690804118e365a0a3e8f£9a5cf1c57.jpg" border="0" width= "145" 
height="100" /> </a> 
<p> 威 化 饼 采 用 新 鲜 、 纯 正 、 支 链 淀粉 多 、 黏 性 大 的 糯米 为 主 料 ， 先 将 糯米 洗 净 、 浸 泡 、 晾 干 、 春 
粉 </p> 
<p><a href="#" class="arrow"> 详 细 内 容 </a></p> 
</div> 
<div class="promotop grid" style="padding-top:10px;" > 
<h3><a href="#" > 泰国 干果 营养 健康 新 选择 </a></h3> 
<hr/> 
<a href="#" > <img src="img/145x100 SWS.jpg~MOD=AJPERES&amp; CACHEID= 
df8e8900420d7cld9a94fe2d0d22fd60.jpg" border="0" width="145" 
height="100" /> </a> 
<p> 花 生 滋养 补益 ， 有 助 于 延年益寿 ， 所 以 民间 又 称 之 为 “长 生 果 ”。</p> 
<p><a href="#" target=" self" class="arrow"> 详 细 内 容 </a></p> 
</div> 
<div class="promotop grid" style="padding-top:10px;" > 
<h3><a href="#" > 开怀 尝鲜 “ 洋 零食 ”</a></h3> 
<hr/> 
<a href="#"> <img src="img/145x100 question1l.jpg~MOD=AJPERES&amp; CRCHEID= 
30d0cd80422335298526ff2d0d22fd60.jpg" border="0" width="145" 
height="100" /> </a> 
<p> 只 要 你 稍微 留心 一 下 ， 便 会 发 现 身 边 的 进口 食品 专营 店 从 稀少 到 常见 ， 越 来 越 多 。</p> 
<p><a href="#" class="arrow"> 详 细 内 容 </a></p> 
</div> 
</div> 
<br /> 
<br /> 
<div> 


23.3.6 ”网 页 底部 


网 页 底部 主要 包括 友情 链接 模块 、 快 速 访问 模块 等 内 容 。 相 对 比较 简单 ， 具 体 效果 如 





23-7 所 示 。 
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图 23-7 网 页 底部 


D 


实现 网 页 底部 功能 的 具体 代码 如 下 : 


<div id="quickLinks" class="container"> 
<h3> 快 速 导 航 </h3> 
<div class="grid 1"> 
<h4><a href="#" > 博客 园 </a></h4> 
<ul> 
<li><a href='#'> 查看 最 新 </a></1i> 
<li ><a href='#'> 写 博客 </a></1i> 
<li ><a href='#'> 进入 博客 园 </a></1i> 
</ul> 
<h4><a href="#" >VIP 专区 </a></h4> 
<ul> 
<li><a href="#" >VIP 会 员 登 录 </a></1i> 
<li class=""><a href="#" > 申请 VIP 会 员 </a></1i> 
<li class=""><a href="#'> 订阅 免费 期 刊 </a></1i> 
<li class=""><a href='#'> VIP 会 员 的 优惠 </a></1i> 
<li class=""><a href='#'> VIP 会 员 帮 助 </a></1i> 
</ul> 
</div> 
<div class="grid 1"> 
<h4><a href="#" > 儿童 食品 选 购 </a></h4> 
<ul> 
<li class=""><a href="#'> 婴 幼儿 食品 </a></1i> 
<li class=""><a href='#'> 1~3 岁 儿 童 食品 </a></1i> 
<li class=""><a href="#'> 婴 幼 儿 乳 制品 </a></1i> 
<li class=""><a href="#'> 儿童 乳 制 品 </a></1i> 
<li class=""><a href='#'> 儿童 零食 </a></1i> 
<li class=""><a href='#'> 儿童 饮料 </a></1i> 
<li class=""><a href='#'> 专家 咨询 </a></1i> 
</ul> 
</div> 
<div class="grid 1"> 
<h4><a href="#" > 美食 社区 </a></h4> 
<ul> 
<li class=""><a href='"#'> 进入 社区 </a></1i> 
<li class=""><a href='#'> 最 新 动态 </a></1i> 
<li class=""><a href='#'> 专题 报道 </a></1i> 
<li class=""><a href='#'> 讨论 专区 </a></1i> 
<li class=""><a href='#'> 社区 帮助 </a></1i> 
</ul> 
<h4><a href="#" > 食品 知识 </a></h4> 
<ul> 
<li class=""><a href='#'> 食物 的 搭配 </a></1i> 
<li class=""><a href='#'> 美食 营养 学 </a></1i> 
<li class=""><a href='#'> 注意 要 点 </a></1i> 
<li class=""><a href='#'> 在 线 咨询 </a></1i> 
</ul> 
</div> 
<div class="grid 1"> 
<h4><a href="#" target="_blank" > 网 站 帮助 </a></h4> 
<ul> 
<li><a href="#" target=" blank" > 在 线 提问 </a></1i> 
<li><a href="#" target="_blank" > 意见 建议 </a></1i> 
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</ul> 

<h4><a href="#" > 加 入 我 们 </a></h4> 

<ul> 
<li><a href="#" target="_blank" > 事业 特色 </a></1i> 
<li><a href="#" target="_blank" > 建 店 支 持 </a></1i> 





<li><a target="_blank" > 经 营 管理 </a></1i> 
<li><a target="_blank" > 在线 申请 </a></1i> 
</ul> 
<h4><a href="#" target="_blank" > 网 银 在 线 支 付 </a></h4> 
<ul> 


<li><a href="#" target="_blank" > 支付 平台 </a></1i> 
<li><a href="#" target="_blank" > 支付 流程 </a></1i> 
<li><a href="#" target="_blank" > 支付 帮助 </a></1i> 
</ul> 
</div> 
<div class="grid 1"> 
<h4><a href="#" > 关于 我 们 </a></h4> 
<ul> 
<li class=""><a href='#'> 关于 公司 </a></1i> 
<li class=""><a href='#'> 关于 团队 </a></1i> 
<li class=""><a href='#'> 联系 我 们 </a></1i> 
<li class=""><a href='#'> 社会 责任 </a></1i> 
<li class=""><a href='#'> 展望 未 来 </a></1i> 
<li class=""><a href='#"> 公司 新 闻 </a></1i> 
</ul> 
</div> 
<div class="grid 1"> 
<ul > 
<li><a href="#" target="_blank" class="bold"> 意 见 建议 </a></1i> 
<li><a href="#" target=" blank" class="bold"> 问 题 投 诉 </a></1i> 
<li><a href="#" class="bold"> 加 盟 通道 </a></1i> 
<li><a href="#" class="bold"> 联 系 我 们 </a></1i> 
<li><a href="#" class="bold"> 人 才 招 聘 </a></1i> 
</ul> 
</div> 
<div class="clear"></div> 
</div> 
<div id="footer"> 
<p class="smal1"> 儿 童 食品 网 .保留 一 切 权 利 .</p> 
</div> 
</div> 





第 24 章 
开发 连锁 酒店 
订购 系统 


本 章 介绍 一 个 酒店 订购 系统 的 开发 。 这 里 将 使 用 前 面 学 习 的 local Storage 来 处 
理 订单 的 存储 和 查询 。 该 系统 主要 功能 为 订购 房间 、 查 询 连锁 分 店 、 查 询 订单 、 查 
看 酒店 介绍 等 功能 。 通 过 本 章 的 学 习 ， 用 户 可 以 了 解 在 线 订 购 系统 的 制作 方法 、 使 
用 localStorage 模拟 在 线 订 购 和 查询 订单 的 方法 和 技巧 。 


重点 案例 效果 


D re 


WRITS 以 下 为 您 的 订购 列表 : 


房间 楼 层 ”是 否 带 窗户 是否 需 接 送 





二 楼 有 窗口 需要 接送 
26 123456789 
© [oy © © —————— 
hy 


立即 预订 连 领 分 牛 我 的 订单 RITA 


订购 专线 : 12345678 订购 专线 : 12345678 
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24.1 ”连锁 酒店 订购 的 需求 分 析 


需求 分 析 是 连锁 酒店 订购 系统 开发 的 必要 环节 。 该 系统 的 需求 如 下 。 

(1) 用 户 可 以 预订 不 同 的 房间 级 别 ， 定 制 个 性 化 的 房间 ， 而 且 还 可 以 快速 搜索 自己 需要 的 
房间 类 型 。 

D 用 户 可 以 查看 全 国 连锁 酒店 的 分 店 情况 ， 并 且 可 以 自主 联系 酒店 的 分 店 。 

(3) 用 户 可 以 查看 预订 过 的 订单 详情 ， 还 可 以 删除 不 需要 的 订单 。 

(4) 用 户 可 以 查看 连锁 酒店 的 介绍 。 

制作 完成 后 的 首页 效果 如 图 24-1 所 示 。 


千 谷 连锁 酒店 系统 











a 


订购 专线 : 12345678 


图 24-1 连锁 酒店 订购 系统 的 首页 效果 
24.2 ”网 站 的 结构 


分 析 完 网 站 的 功能 后 ， 开 始 分 析 整 个 网 站 的 结构 ， 主 要 分 为 以 下 5 个 页 面 ， 如 图 24-2 














所 示 。 
连锁 酒店 首页 
index.html 
订购 页 面 连锁 分 店 页 面 | | 我 的 订单 页 面 酒店 介绍 页 面 
dinggou.html liansuo.html dingdan.html about.html 
图 24-2 ”网 站 的 结构 
各 个 页 面 的 主要 功能 如 下 。 


(1) index.html。 该 页 面 的 系统 的 主页 面 ， 主 要 是 网 站 的 入 口 ， 通 过 主页 可 以 链接 到 订购 页 
面 、 连 锁 分 店 页 面 、 我 的 订单 页 面 和 酒店 介绍 页 面 。 
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(2) dinggou.html。 该 页 面 是 酒店 订购 页 面 ， 主 要 包括 3 个 page， 第 一 个 page 是 选择 房间 
类 型 ， 第 二 个 page 主要 功能 是 选择 房间 的 具体 参数 ;第 三 个 page 是 显示 订单 完成 信息 。 

(3) liansuo.html。 该 页 面 主要 显示 连锁 分 店 的 具体 信息 。 

(4) dingdan.html。 该 页 面 主要 显示 用 户 已 经 订购 的 订单 信息 。 

(5) abouthtm1。 该 页 面 主要 显示 关于 连锁 酒店 的 简单 介绍 。 


24.3 ”连锁 酒店 订购 系统 的 代码 实现 


下 面 来 分 析 连 锁 酒店 订购 系统 的 代码 是 如 何 实现 的 。 


24.3.1 设计 首页 


首页 中 主要 包括 1 个 图 片 和 4 个 按钮 ， 分 别 连接 到 订购 页 面 、 连 锁 分 店 页 面 、 我 的 订单 
页 面 和 酒店 介绍 页 面 。 主 要 代码 如 下 : 


<div data-role="page" data-title="Happy" id="first" data-theme="a"> 
<div data-role="header"> 
<h1> 千 谷 连 锁 酒店 系统 </h1> 
</div> 
<div data-role="content" id="content" class="firstcontent"> 
<img src="images/zhu.png" id="logo"><br/> 
<a href="caigou.html" data-ajax="false" data-role="button" data- 
icon="home" data-iconpos="top" data-mini="true" data- 
inline="true"><img src="images/cai.png"><br>IZ Bl fli] </a> 
<a href="liansuo.html" data-ajax="false" data-role="button" data- 
icon="search" data-iconpos="top" data-mini="true" data- 
inline="true"><img src="images/lian.png"><br> 连 锁 分 店 </a> 
<a href="dingdan.html" data-ajax="false" data-role="button" data- 
icon="gear" data-iconpos="top" data-mini="true" data- 
inline="true"><img src="images/ding.png"><br> 我 的 订单 </a> 
<a href="about.html" data-ajax="false" data-role="button" data- 
icon="gear" data-iconpos="top" data-mini="true" data- 
inline="true"><img src="images/ding.png"><br>KFF#</a> 
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</div> 
<div data-role="footer" data-position="fixed" style="text-align:center"> 


订购 专线 : 12345678 
</div> 
</div> 


其 中 data-ajax="false" 表 示 停 用 Ajax 加 载 网 页 ，data-role="button" 表 示 该 链接 的 外 观 以 按 
钮 的 形式 显示 ; data-icon="home" 表 示 按 钮 的 图 标 效果 ; data-iconpos="top" 表 示 小 图 标 在 按钮 
上 方 显示 ; data-inline="true" 表 示 以 最 小 宽度 显示 。 效 果 如 图 24-3 所 示 。 


DS 


24-3 ”链接 的 样式 效果 








HTML 5 网 页 设计 
案例 课堂 (第 ?版 ) W = 





其 中 页 脚 部 分 通过 设置 属性 data-position="fixed"， 可 以 让 页 脚 内 容 一 直 显 示 在 页 面 的 最 
下 方 。 通 过 设置 style="text-align:center"， 可 以 让 页 脚 内 容 居 中 显示 ， 如 图 24-4 所 示 。 





24-4 ”页 脚 的 样式 效果 





24.3.2 ”订购 页 面 


订购 页 面 主要 包含 3 个 page， 主 要 包括 选择 房间 类 型 page(id=first)、 选 择 房间 的 具体 参 
数 page(id=second) 和 显示 订单 完成 信息 page(id=third)。 


1. 选择 房间 类 型 page 


其 中 选择 房间 类 型 page 中 包括 房间 列表 、 返 回 到 上 一 页 、 快 速 搜索 房间 等 功能 。 代 码 
如 下 : 


<div data-role="page" data-title=" 房 间 列 表 " id="first" data-theme="a"> 
<div data-role="header"> 
<a href="index.html" data-icon="arrow-1" data-iconpos="left" data- 
ajax="false">Back</a> <hl> 房 间 列表 </hl1> 
</div> 
<div data-role="content" id="content"> 
<ul data-role="listview" data-inset="true" data-filter="true" data- 
filter-placeholder=" 快 速 搜索 房间 "> 
<i> 
<a href="#second"> 
<img src="images/putong.png" /> 
<h3> 普 通 间 </h3> 
<p>24 小 时 有 热 水 </p> 
</a> 
<a href="#second" data-icon="plus"></a> 
</li> 
abba 
<a href="#second"> 
<img src="images/wangluo.png" /> 
<h3> 网 络 间 </h3> 
<p> 有 网 络 和 电脑 、24 小 时 热 水 </p> 
</a> 
<a href="#second" data-icon="plus"></a> 
</li> 
< 
<a href="#second"> 
<img src="images/haohua.png" /> 
<h3> 豪 华 间 </h3> 
<p> 免 费 提供 三 餐 、 有 了 网络 和 电脑 、24 小 时 热 水 </p> 


</a> 
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<a href="#second" data-icon="plus"></a> 
</li> 
<li> 
<a href="#second"> 
<img src="images/zongtong.png" /> 
<h3> 总 统 间 </h3> 
<p>24 小 时 客服 、 有 网 络 和 电脑 、24 小 时 热 水 、 免 费 提供 三 餐 </p> 
</a> 
<a href="#second" data-icon="plus"></a> 
<iis 
</ul> 
</div> 
<div data-role="footer" data-position="fixed" style="text-align:center"> 
订购 专线 : 12345678 
</div> 
</div> 


房间 列表 页 面 的 效果 如 图 24-5 所 示 。 
页 面 中 有 一 个 Back 按钮 ， 主 要 作用 是 返回 到 主页 ， 通 过 以 下 代码 来 控制 : 


<a href="index.html" data-icon="arrow-1" data-iconpos="left" data- SS 
ajax="false">Back</a> 


CE 
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房间 列表 使 用 listview 组 件 ， 通 过 设置 data-filter="true"， 就 会 在 列表 上 方 显 示 搜 索 框 ; 
通过 设置 data-inset="true"， 可 以 让 listview 组 件 添加 圆 角 效果 ， 而 且 不 与 屏幕 同 宽 ， 其 中 
data-filter-placeholder 属性 用 于 设置 搜索 框 内 显示 的 内 容 ， 当 输入 搜索 内 容 ， 将 查询 出 相关 的 
记 账 信息 ， 如 图 24-6 所 示 。 


Q Back 房间 列表 


(O 快速 搜索 房间 











图 24-5 ”房间 列表 图 24-6 ”快速 搜索 房间 


2. 选择 房间 的 具体 参数 page 


选择 房间 的 具体 参数 page 的 id 为 second， 主 要 让 用 户 选 择 楼 层 、 是 否 带 窗口 、 是 否 需要 
接送 、 订 购 数量 和 用 户 联 系 方式 ， 如 图 24-7 所 示 。 
这 个 页 面 的 Back 按钮 的 设置 方法 和 上 一 个 page 不 同 ， 通 过 设置 属性 data-add-back- 
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btn="true" 实 现 返 回 上 一 页 的 功能 ， 代 码 如 下 : 
<div data-role="page" data-title=" 选 择 房间 " id="second" data-theme="a" data- 
add-back-btn="true"> 


该 页 面包 含 选 择 菜 单 (Select menu)、2 个 单 选 按钮 组 件 (Radio button)、 范 围 滑 块 (Slider)、 


文本 框 (text) 和 按钮 组 件 (button)。 
其 中 添加 选择 菜单 (Select menu) 的 代码 如 下 : 


<div data-role="content" id="content"> 


选择 楼 层 : 


<select name="selectitem" id="selectitem"> 
<option value=" 一 楼 "> 一 楼 </ option> 
<option value=" 二 楼 "> 二 楼 </option> 
<option value=" 三 楼 楼 "> 三 楼 </option> 
</select> 


选择 菜单 的 预览 效果 如 图 24-8 所 示 。 


选择 房间 





























订购 数量 : 
Cie 
客户 联系 方式 : 
| ) 选择 是 否 三 楼 
24-7 ”选择 房间 图 24-8 选择 菜单 
2 个 单 选 按钮 组 的 代码 如 下 : 


<fieldset data-role="controlgroup"> 
<legend> 选 择 是 否 带 窗口 : </legend> 

<input type="radio" name="flavoritem" id="radio-choice-1" 
value=" MO" checked /> 

<label for="radio-choice-1"> 有 窗户 </label> 

<input type="radio" name="flavoritem" id="radio-choice-2" 
value=" 无 窗户 ” /> 

<label for="radio-choice-2"> 无 窗户 </1abe1l> 
<fieldset data-role="controlgroupl"> 


<legend> 选 择 是 否 接送 : </legend> 


<input type="radio" name="flavoriteml" id="radio-choice-3" 


=a) 


value=" 需 要 接送 " checked /> 
<label for="radio-choice-3"> 需 要 接送 </1abe1> 
<input type="radio" name="flavoritem1" id="radio-choice-4" 
value=" 无 需 接送 "” /> 
<label for="radio-choice-4"> 无 需 接 送 </label> 
单 选 按钮 组 的 预览 效果 如 图 24-9 所 示 。 
使 用 <fieldset> 标 记 创建 单 选 按钮 组 ， 通 过 设置 属性 data-role="controlgroup"， 可 以 让 各 个 
单 选 按钮 外 观 像 一 个 组 合 ， 整 体 效果 比较 好 。 
范围 滑 杆 的 代码 如 下 : 
<input type="range" name="num" id="num" value="1" min="0" max="100" data- 
highlight="true" /> 
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范围 滑 杆 的 预览 效果 如 图 24-10 所 示 。 
选择 是 否 带 窗口 : 





P 
AN 
AH 
Ai 








订购 数量 : 
+ 
四 
=D 
E 24-9 Ži E 24-10 ”范围 滑 杆 


文本 框 的 代码 如 下 : 


<input type="text" name="textl" id="textl" size="10" maxlength="10" /> 


其 中 size 属性 用 于 设置 文本 框 的 长 度 ，maxlength 属性 设置 输入 的 最 大 值 。 
文本 框 的 预览 效果 如 图 24-11 所 示 。 
确认 按钮 的 代码 如 下 : 


<input type="button" id="addToStorage" value=" 确 认 订 单 " /> 
确认 按钮 的 预览 效果 如 图 24-12 所 示 。 
客户 联系 方式 : 


CC 


图 24-11 文本 框 图 24-12 确认 按钮 


3. 显示 订单 完成 信息 page 
显示 订单 完成 信息 page 的 代码 如 下 : 


<div data-role="page" id="third"> 
<div data-role="header"> 
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<a href="index.html" data-icon="arrow-1" data-iconpos="left" data- 

ajax="false"> 回 首页 </a> <h1> 订 购 完成 </h1> 

</div> 

<div data-role="content" id="content"> 

<img src="images/ding.png" /><br> 

<font style="font-size:20px;"> 感 谢 您 选择 我 们 酒店 <br> 

以 下 为 您 的 订购 房间 信息 : </font> 

<p><div id="message" style="font-size:25px; color: #££0000"></div> 

</div> 

<div data-role="footer" data-position="fixed" style="text-align:center"> 
订购 专线 : 12345678 

</div> 

</div> 


订单 完成 信息 页 面 的 预览 效果 如 图 24-13 所 示 。 








感谢 您 选择 我 们 酒店 
以 下 为 您 的 订购 房间 信息 : 


房间 楼 层 : 二 楼 
是 否 带 窗 户 : 有 窗口 
是 否 需 接送 : 需要 接送 
房间 数量 : 26 

客户 联系 方式 : 123456789 


2413 ”订单 完成 信息 


接收 订单 的 功能 是 通过 JavaScript 来 完成 的 ， 代 码 如 下 : 


<script type="text/javascript"> 
var orderitem = "orderitem"; 
var flavor = "itemflavor"; 
var flavorl = "itemflavorl"; 
var num = "num"; 
var texti = "texti"; 
$("#second") .live('pagecreate', function() { 
$('#addToStorage').click(function() { 
localStorage.orderitem=$ ("select#selectitem") .val(); 
localStorage.flavor=$ ("input [name="flavoritem"] :checked') .val (); 
localStorage. flavorl1=$ ("input [name= 
"flavoritem1"] :checked') .val (); 
localStorage.num=$ ('#num') .val (); 
localStorage.text1=$ ('#text1') .val (); 
$.mobile.changePage($('#third'),{transition: 'slide'}); 
H); 
H; 
$('#third').live('pageinit', function() { 
var itemflavor = "房间 楼 层 : "+ localStorage.orderitem+"<br> 


是 否 带 窗户 : "+localStorage .flavor+"<br> 是 否 需 接 送 : "+localStorage.flavorl+"<br> 
房间 数量 : "+localstorage .num+"<br> 客 户 联 系 方式 : 


"+localStorage.textl; 
$('#message') .html (itemflavor) ; 
//document .getElementById ("message") .innerHTML= itemflavor 
We 

</script> 

其 中 $ 符 号 代表 组 件 ， 例 如 S$("#second") 表 示 id 为 second 的 组 件 。liveO 函 数 为 文件 页 面 附 
加 事件 处 理 程序 ， 并 规定 事件 发 生 时 执行 的 函数 。 例 如 ， 下 面 的 代码 表示 当 id 为 second 的 页 
面 发 生 pagecreate 事件 时 ， 就 执行 相应 的 函数 : 


$("#second") .live('pagecreate', function() {..})7 


当 id 为 second 的 页 面 确认 订单 时 ， 将 会 把 订单 的 信息 保存 到 localStorage。 当 加 载 到 id 
为 third 的 页 面 加 载 时 ， 将 localStorage 存放 的 内 容 取出 来 并 显示 在 id 为 message 的 <div> 组 件 
中 。 代 码 如 下 : 


$('#third').live('pageinit', function() { 
var itemflavor = "房间 楼 层 : "+ localStorage.orderitem+"<br> 
是 否 带 窗户 : "+1localstorage.flavor+"<br> 是 否 需 接送 : "+localStorage. flavorl+"<br> 
房间 数量 : "+localSstorage.num+"<br> 客 户 联系 方式 : 
"+localStorage.textl; 
$('#message') .html (itemflavor) ; 
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其 中 $(##message').html(itemflavor) 的 语法 作用 和 下 面 的 代码 一 样 ， 都 是 用 itemflavor 字符 
串 替 代 <div> 组 件 中 的 内 容 : 


document .getElementById ("message") .innerHTML= itemflavor; 


24.3.3 ”连锁 分 店 页 面 
连锁 分 店 页 面 为 liansuo html， 主 要 代码 如 下 ; 


<div data-role="page" data-title=" 全 国 连锁 酒店 "id="first" data-theme="a"> 
<div data-role="header"> 
<a href="index.html" data-icon="arrow-1" data-iconpos="left" data- 
ajax="false"> 回 首页 </a> 
<h1> 全 国 连锁 酒店 </h1> 
</div> 
<div data-role="content" id="content"> 
<ul data-role="listview" data-inset="true"> 
<li> 
<a href="#" onclick="getmap (! 上 海 连锁 酒店 ') ”id=btn> 
<img src="images/shanghai.png" /> 
<h3> 上 海 连锁 酒店 </h3> 
<p> 咨 询 热线 : 19912345678</p> 
</a> 





</li> 
<li> 
<a href="#" onclick="getmap (' 北 京 连锁 酒店 ')" id=btn> 
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<img src="images/beijing-.png" /> 
<h3> 北 京 连锁 酒店 </h3> 
<p> 咨 询 热线 : 18812345678</p> 

</a> 


</li> 
<li> 
<a href="#" onclick="getmap(' 厦 门 连锁 酒店 ')" id=btn> 
<img src="images/xiamen.png" /> 
<h3> 厦 门 连锁 酒店 </h3> 
<p> 咨 询 热线 : 16612345678</p> 
</a> 


</li> 
</ul> 


</div> 
<div data-role="footer" data-position="fixed" style="text-align:center"> 


连锁 酒店 总 部 热线 : 12345678 


</div> 
</div> 
连锁 分 店 页 面 的 预览 效果 如 图 24-14 所 示 。 
全 国 连锁 酒店 





图 24-14 ”连锁 分 店 页 面 
其 中 使 用 listview 组 件 来 完成 列表 的 功能 。 通 过 链接 的 方式 返回 到 首页 ， 代 码 如 下 : 


<a href="index.html" data-icon="arrow-1" data-iconpos="left" data- 
ajax="false"> 回 首页 </a> 


2434 查看 订单 页 面 
查看 订单 页 面 为 dingdan html， 显 示 内 容 的 代码 如 下 : 


<div data-role="page" data-title=" 订 单列 表 " id="first" data-theme="a"> 
<div data-role="header"> 





<a hre "index.html" data-icon="arrow-1" data-iconpos="left" data- 
ajax="false"> 回 首页 </a><h1> 订 单列 表 </h1> 
</div> 
<div data-role="content" id="content"> 
<a href="#" data-role="button" data-inline="true" onclick="deleteOrder ();"> 
删除 订单 </a> 
以 下 为 您 的 订购 列表 : 
<div class="ui-grid-b"> 
<div class="ui-block-a ui-bar-a"> 房 间 楼 层 </div> 
<div class="ui-block-b ui-bar-a"> 是 否 带 窗户 </div> 
<div class="ui-block-b ui-bar-a"> 是 否 需 接送 </div> 


<div class="ui-block-a ui-bar-b" i 
<div class="ui-block-b ui-bar-b" i flavor"></div> 

<div class="ui-block-b ui-bar-b" id="flavor1"></div> 

<div class="ui-block-c ui-bar-a"> 订 购 数量 </div> 
<div class="ui-block-c ui-bar-a"> 客 户 联系 方式 </div> 

<div class="ui-block-c ui-bar-a"></div> 
<div class="ui-block-c ui-bar-b" id="num"></div> 
<div class="ui-block-c ui-bar-b" id="text1"></div> 

</div> 

</div> 

<div data-role="footer" data-position="fixed" style="text-align:center"> 
订购 专线 : 12345678 


</div> 


查看 订单 页 面 的 预览 效果 如 图 24-15 所 示 。 


"orderitem"></div> 












BTS 以 下 为 您 的 订购 列表 : 
房间 楼 层 。 ”是 否 带 窗户 。 是 否 需 接送 


二 楼 有 窗口 需要 接送 
订购 数量 客户 联系 方式 
26 123456789 


订购 专线 : 12345678 
图 24-15 查看 订单 页 面 
该 页 面 的 主要 功能 是 将 localStorage 的 数据 取出 并 显示 在 页 面 上 ， 主 要 由 以 下 代码 实现 : 


<script type="text/javascript"> 
$('#first').live('pageinit', function() { 
$('#orderitem') .html (localStorage.orderitem) ; 
$('#flavor') .html (localStorage. flavor) ; 
$('#flavorl1') .html (localStorage.flavorl1) > 
$('#num') .html (localStorage.num) ; 
$('#text1"') -html (localStorage.text1) ; 
be 
</script> 
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通过 单 击 页 面 中 的 “删除 订单 ”按钮 ， 可 以 删除 订单 ， 通 过 以 下 函数 实现 删除 功能 : 


function deleteOrder (){ 
localStorage.clear(); 
$(".ui-grid-b") .html ("已 取消 订单 1"); 
i 


2435 酒店 介绍 页 面 
酒店 介绍 页 面 为 abouthtml， 该 页 面 的 主要 代码 如 下 : 


<div data-role="page" data-title=" 全 国 连锁 酒店 " id="first" data-theme="a"> 
<div data-role="header"> 

<a href="index.html" data-icon="arrow-1" data-iconpos="left" data- 
ajax="false"> 回 首页 </a><h1> 千 谷 连锁 酒店 </h1> 

</div> 

<div data-role="content" id="content"> 


<img src="images/about.png" /><br> 
<font style="font-size:20px; "> 千 谷 连锁 酒店 集团 定位 于 全 国 连 锁 高 级 酒店 的 发 展 ， 完善 的 酒 
店 预订 系统 , 让 您 预订 酒店 客房 更 加 轻松 快捷 , 是 您 出 差 、 旅 游 的 好 选择 。</font> 


</div> 

<div data-role="footer" data-position="fixed" style="text-align:center"> 
连锁 酒店 总 部 热线 : 12345678 

</div> 

</div> 


酒店 介绍 页 面 的 预览 效果 如 图 24-16 所 示 。 


TEEMAS 





和 干 谷 连 锁 酒 店 集团 定位 于 全 国 连锁 高 
级 酒店 的 发 展 ,完善 的 酒店 预订 系统 
让 您 预订 酒店 客房 更 加 轻松 快捷 ,是 
您 出 差 、 旅 游 的 好 选择 。 


连锁 酒店 总 部 热线 : 12345678 
图 24-16 酒店 介绍 页 面 
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